feat(pnpm): migrate away from yarn

test: integration tests for percentile aggregation (#10555 )
* fix: make histogramQuantile function work for devenv setup * fix: make histogramQuantile function work for integration tests * test: histogram percentile integration tests * chore: explicitly mention user_scripts_path * chore: fail tests if download of UDF fails
2026-03-12 08:13:19 +00:00 · 2026-03-11 23:52:34 -03:00 · 2026-03-11 14:27:01 +00:00 · 2026-03-11 12:53:32 +00:00 · 2026-03-11 07:23:30 +00:00 · 2026-03-11 07:23:21 +00:00
136 changed files with 25943 additions and 989 deletions
--- a/.devenv/docker/clickhouse/compose.yaml
+++ b/.devenv/docker/clickhouse/compose.yaml
@@ -1,4 +1,22 @@
 services:
+  init-clickhouse:
+    image: clickhouse/clickhouse-server:25.5.6
+    container_name: init-clickhouse
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    restart: on-failure
+    volumes:
+      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
  clickhouse:
    image: clickhouse/clickhouse-server:25.5.6
    container_name: clickhouse
@@ -7,6 +25,7 @@ services:
      - ${PWD}/fs/etc/clickhouse-server/users.d/users.xml:/etc/clickhouse-server/users.d/users.xml
      - ${PWD}/fs/tmp/var/lib/clickhouse/:/var/lib/clickhouse/
      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
+      - ${PWD}/../../../deploy/common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
    ports:
      - '127.0.0.1:8123:8123'
      - '127.0.0.1:9000:9000'
@@ -22,7 +41,10 @@ services:
      timeout: 5s
      retries: 3
    depends_on:
-      - zookeeper
+      init-clickhouse:
+        condition: service_completed_successfully
+      zookeeper:
+        condition: service_healthy
    environment:
      - CLICKHOUSE_SKIP_USER_SETUP=1
  zookeeper:
--- a/.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml
+++ b/.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml
@@ -44,4 +44,6 @@
        <shard>01</shard>
        <replica>01</replica>
    </macros>
+    <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
+    <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
 </clickhouse>
--- a/.github/workflows/goci.yaml
+++ b/.github/workflows/goci.yaml
@@ -77,6 +77,10 @@ jobs:
        uses: actions/setup-node@v5
        with:
          node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
      - name: docker-community
        shell: bash
        run: |
@@ -106,9 +110,13 @@ jobs:
        uses: actions/setup-node@v5
        with:
          node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
      - name: install-frontend
-        run: cd frontend && yarn install
+        run: cd frontend && pnpm install
      - name: generate-api-clients
        run: |
-          cd frontend && yarn generate:api
-          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run yarn generate:api in frontend/ locally and commit."; exit 1)
+          cd frontend && pnpm generate:api
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run pnpm generate:api in frontend/ locally and commit."; exit 1)
--- a/.github/workflows/gor-signoz-community.yaml
+++ b/.github/workflows/gor-signoz-community.yaml
@@ -25,6 +25,10 @@ jobs:
        uses: actions/setup-node@v5
        with:
          node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
      - name: build-frontend
        run: make js-build
      - name: upload-frontend-artifact
--- a/.github/workflows/gor-signoz.yaml
+++ b/.github/workflows/gor-signoz.yaml
@@ -41,6 +41,10 @@ jobs:
        uses: actions/setup-node@v5
        with:
          node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
      - name: build-frontend
        run: make js-build
      - name: upload-frontend-artifact
--- a/.github/workflows/jsci.yaml
+++ b/.github/workflows/jsci.yaml
@@ -78,10 +78,15 @@ jobs:
        with:
          node-version: "22"

+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
      - name: Install frontend dependencies
        working-directory: ./frontend
        run: |
-          yarn install
+          pnpm install

      - name: Install uv
        uses: astral-sh/setup-uv@v5
@@ -98,7 +103,7 @@ jobs:
      - name: Generate permissions.type.ts
        working-directory: ./frontend
        run: |
-          yarn generate:permissions-type
+          pnpm generate:permissions-type

      - name: Teardown test environment
        if: always()
@@ -108,6 +113,6 @@ jobs:
      - name: Check for changes
        run: |
          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
-            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
+            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: pnpm generate:permissions-type (from the frontend directory)"
            exit 1
          fi
--- a/.github/workflows/run-e2e.yaml
+++ b/.github/workflows/run-e2e.yaml
@@ -27,6 +27,11 @@ jobs:
        with:
          node-version: lts/*

+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
      - name: Mask secrets and input
        run: |
          echo "::add-mask::${{ secrets.BASE_URL }}"
@@ -37,12 +42,11 @@ jobs:
      - name: Install dependencies
        working-directory: frontend
        run: |
-          npm install -g yarn
-          yarn
+          pnpm install

      - name: Install Playwright Browsers
        working-directory: frontend
-        run: yarn playwright install --with-deps
+        run: pnpm playwright install --with-deps

      - name: Run Playwright Tests
        working-directory: frontend
@@ -51,7 +55,7 @@ jobs:
          LOGIN_USERNAME="${{ secrets.LOGIN_USERNAME }}" \
          LOGIN_PASSWORD="${{ secrets.LOGIN_PASSWORD }}" \
          USER_ROLE="${{ github.event.inputs.userRole }}" \
-          yarn playwright test
+          pnpm playwright test

      - name: Upload Playwright Report
        uses: actions/upload-artifact@v4
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,19 +1,21 @@
 # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
 # and commit this file to your remote git repository to share the goodness with others.

-
 tasks:
  - name: Run Docker Images
    init: |
      cd ./deploy/docker
      sudo docker compose up -d

+  - name: Install pnpm
+    init: |
+      npm i -g pnpm
+
  - name: Run Frontend
    init: |
      cd ./frontend
-      yarn install
-    command:
-      yarn dev
+      pnpm install
+    command: pnpm dev

 ports:
  - port: 8080
--- a/2
+++ b/2
@@ -154,7 +154,7 @@ $(GO_BUILD_ARCHS_ENTERPRISE_RACE): go-build-enterprise-race-%: $(TARGET_DIR)
 .PHONY: js-build
 js-build: ## Builds the js frontend
 	@echo ">> building js frontend"
-	@cd $(JS_BUILD_CONTEXT) && CI=1 yarn install && yarn build
+	@cd $(JS_BUILD_CONTEXT) && CI=1 pnpm install && pnpm build

 ##############################################################
 # docker commands
--- a/cmd/enterprise/Dockerfile.with-web.integration
+++ b/cmd/enterprise/Dockerfile.with-web.integration
@@ -3,8 +3,9 @@ FROM node:22-bookworm AS build
 WORKDIR /opt/
 COPY ./frontend/ ./
 ENV NODE_OPTIONS=--max-old-space-size=8192
-RUN CI=1 yarn install
-RUN CI=1 yarn build
+RUN CI=1 npm i -g pnpm
+RUN CI=1 pnpm install
+RUN CI=1 pnpm build

 FROM golang:1.25-bookworm

--- a/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -190,7 +190,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -117,7 +117,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
    ports:
      - "8080:8080" # signoz port
    volumes:
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -181,7 +181,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
    container_name: signoz
    ports:
      - "8080:8080" # signoz port
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -109,7 +109,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
    container_name: signoz
    ports:
      - "8080:8080" # signoz port
--- a/docs/contributing/development.md
+++ b/docs/contributing/development.md
@@ -13,13 +13,12 @@ Before diving in, make sure you have these tools installed:
  - Download from [go.dev/dl](https://go.dev/dl/)
  - Check [go.mod](../../go.mod#L3) for the minimum version

-
 - **Node** - Powers our frontend
  - Download from [nodejs.org](https://nodejs.org)
  - Check [.nvmrc](../../frontend/.nvmrc) for the version

- **Yarn** - Our frontend package manager
-  - Follow the [installation guide](https://yarnpkg.com/getting-started/install)
+- **Pnpm** - Our frontend package manager
+  - Follow the [installation guide](https://pnpm.io/installation)

 - **Docker** - For running Clickhouse and Postgres locally
  - Get it from [docs.docker.com/get-docker](https://docs.docker.com/get-docker/)
@@ -95,20 +94,20 @@ This command:

 2. Install dependencies:
   ```bash
-   yarn install
+   pnpm install
   ```

 3. Create a `.env` file in this directory:
   ```env
-   FRONTEND_API_ENDPOINT=http://localhost:8080
+   VITE_FRONTEND_API_ENDPOINT=http://localhost:8080
   ```

 4. Start the development server:
   ```bash
-   yarn dev
+   pnpm dev
   ```

-> 💡 **Tip**: `yarn dev` will automatically rebuild when you make changes to the code
+> 💡 **Tip**: `pnpm dev` will automatically rebuild when you make changes to the code

 Now you're all set to start developing! Happy coding! 🎉

--- a/docs/contributing/onboarding.md
+++ b/docs/contributing/onboarding.md
@@ -18,40 +18,40 @@ The configuration file is a JSON array containing data source objects. Each obje

 ### Required Keys

-| Key | Type | Description |
-|-----|------|-------------|
-| `dataSource` | `string` | Unique identifier for the data source (kebab-case, e.g., `"aws-ec2"`) |
-| `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
-| `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
-| `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
+| Key          | Type       | Description                                                           |
+| ------------ | ---------- | --------------------------------------------------------------------- |
+| `dataSource` | `string`   | Unique identifier for the data source (kebab-case, e.g., `"aws-ec2"`) |
+| `label`      | `string`   | Display name shown to users (e.g., `"AWS EC2"`)                       |
+| `tags`       | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
+| `module`     | `string`   | Destination module after onboarding completion                        |
+| `imgUrl`     | `string`   | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`)   |

 ### Optional Keys

-| Key | Type | Description |
-|-----|------|-------------|
-| `link` | `string` | Docs link to redirect to (e.g., `"/docs/aws-monitoring/ec2/"`) |
-| `relatedSearchKeywords` | `string[]` | Array of keywords for search functionality |
-| `question` | `object` | Nested question object for multi-step flows |
-| `internalRedirect` | `boolean` | When `true`, navigates within the app instead of showing docs |
+| Key                     | Type       | Description                                                    |
+| ----------------------- | ---------- | -------------------------------------------------------------- |
+| `link`                  | `string`   | Docs link to redirect to (e.g., `"/docs/aws-monitoring/ec2/"`) |
+| `relatedSearchKeywords` | `string[]` | Array of keywords for search functionality                     |
+| `question`              | `object`   | Nested question object for multi-step flows                    |
+| `internalRedirect`      | `boolean`  | When `true`, navigates within the app instead of showing docs  |

 ## Module Values

 The `module` key determines where users are redirected after completing onboarding:

-| Value | Destination |
-|-------|-------------|
-| `apm` | APM / Traces |
-| `logs` | Logs Explorer |
-| `metrics` | Metrics Explorer |
-| `dashboards` | Dashboards |
-| `infra-monitoring-hosts` | Infrastructure Monitoring - Hosts |
-| `infra-monitoring-k8s` | Infrastructure Monitoring - Kubernetes |
-| `messaging-queues-kafka` | Messaging Queues - Kafka |
-| `messaging-queues-celery` | Messaging Queues - Celery |
-| `integrations` | Integrations page |
-| `home` | Home page |
-| `api-monitoring` | API Monitoring |
+| Value                     | Destination                            |
+| ------------------------- | -------------------------------------- |
+| `apm`                     | APM / Traces                           |
+| `logs`                    | Logs Explorer                          |
+| `metrics`                 | Metrics Explorer                       |
+| `dashboards`              | Dashboards                             |
+| `infra-monitoring-hosts`  | Infrastructure Monitoring - Hosts      |
+| `infra-monitoring-k8s`    | Infrastructure Monitoring - Kubernetes |
+| `messaging-queues-kafka`  | Messaging Queues - Kafka               |
+| `messaging-queues-celery` | Messaging Queues - Celery              |
+| `integrations`            | Integrations page                      |
+| `home`                    | Home page                              |
+| `api-monitoring`          | API Monitoring                         |

 ## Question Object Structure

@@ -91,14 +91,14 @@ The `question` object enables multi-step selection flows:

 ### Question Keys

-| Key | Type | Description |
-|-----|------|-------------|
-| `desc` | `string` | Question text displayed to the user |
-| `type` | `string` | Currently only `"select"` is supported |
-| `helpText` | `string` | (Optional) Additional help text below the question |
-| `helpLink` | `string` | (Optional) Docs link for the help section |
+| Key            | Type     | Description                                                 |
+| -------------- | -------- | ----------------------------------------------------------- |
+| `desc`         | `string` | Question text displayed to the user                         |
+| `type`         | `string` | Currently only `"select"` is supported                      |
+| `helpText`     | `string` | (Optional) Additional help text below the question          |
+| `helpLink`     | `string` | (Optional) Docs link for the help section                   |
 | `helpLinkText` | `string` | (Optional) Text for the help link (default: "Learn more →") |
-| `options` | `array` | Array of option objects |
+| `options`      | `array`  | Array of option objects                                     |

 ## Option Object Structure

@@ -273,6 +273,7 @@ Options can be simple (direct link) or nested (with another question):
 - Place logo files in `public/Logos/`
 - Use SVG format
 - Reference as `"/Logos/your-logo.svg"`
+- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.

 ### 4. Links

@@ -290,7 +291,7 @@ Options can be simple (direct link) or nested (with another question):

 1. Add your data source object to the JSON array
 2. Ensure the logo exists in `public/Logos/`
-3. Test the flow locally with `yarn dev`
+3. Test the flow locally with `pnpm dev`
 4. Validation:
   - Navigate to the [onboarding page](http://localhost:3301/get-started-with-signoz-cloud) on your local machine
   - Data source appears in the list
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -4,4 +4,5 @@ build
 i18-generate-hash.js
 src/parser/TraceOperatorParser/**

-orval.config.ts
+orval.config.ts
+pnpm-lock.yaml
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -41,7 +41,7 @@ module.exports = {
 		'jsx-a11y', // Accessibility rules
 		'import', // Import/export linting
 		'sonarjs', // Code quality/complexity
-		// TODO: Uncomment after running: yarn add -D eslint-plugin-spellcheck
+		// TODO: Uncomment after running: pnpm add -D eslint-plugin-spellcheck
 		// 'spellcheck', // Correct spellings
 	],
 	settings: {
--- a/frontend/.husky/commit-msg
+++ b/frontend/.husky/commit-msg
@@ -1,7 +1,7 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-cd frontend && yarn run commitlint --edit $1
+cd frontend && pnpm run commitlint --edit $1

 branch="$(git rev-parse --abbrev-ref HEAD)"

--- a/frontend/.husky/pre-commit
+++ b/frontend/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-cd frontend && yarn lint-staged
+cd frontend && pnpm lint-staged
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -12,4 +12,6 @@ public/
 # Ignore all files in parser folder:
 src/parser/**

-src/TraceOperator/parser/**
+src/TraceOperator/parser/**
+
+pnpm-lock.yaml
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -28,8 +28,8 @@ Follow the steps below
 1. ```git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend```
 1. change baseURL to ```<test environment URL>``` in file ```src/constants/env.ts```

-1. ```yarn install```
-1. ```yarn dev```
+1. ```pnpm install```
+1. ```pnpm dev```

 ```Note: Please ping us in #contributing channel in our slack community and we will DM you with <test environment URL>```

@@ -41,7 +41,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo

 In the project directory, you can run:

-### `yarn start`
+### `pnpm start`

 Runs the app in the development mode.\
 Open [http://localhost:3301](http://localhost:3301) to view it in the browser.
@@ -49,12 +49,12 @@ Open [http://localhost:3301](http://localhost:3301) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.

-### `yarn test`
+### `pnpm test`

 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

-### `yarn build`
+### `pnpm build`

 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -64,7 +64,7 @@ Your app is ready to be deployed!

 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

-### `yarn eject`
+### `pnpm eject`

 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**

@@ -100,6 +100,6 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/a

 This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

-### `yarn build` fails to minify
+### `pnpm build` fails to minify

 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/frontend/example.env
+++ b/frontend/example.env
@@ -1,6 +1,6 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
 VITE_PYLON_APP_ID="pylon-app-id"
 VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -39,7 +39,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -6,6 +6,7 @@
 * Adds custom matchers from the react testing library to all tests
 */
 import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
 import 'jest-styled-components';

 import { server } from './src/mocks-server/server';
--- a/frontend/orval.config.ts
+++ b/frontend/orval.config.ts
@@ -80,7 +80,7 @@ export default defineConfig({
 				header: (info: { title: string; version: string }): string[] => [
 					`! Do not edit manually`,
 					`* The file has been auto-generated using Orval for SigNoz`,
-					`* regenerate with 'yarn generate:api'`,
+					`* regenerate with 'pnpm generate:api'`,
 					...(info.title ? [info.title] : []),
 					...(info.version ? [`OpenAPI spec version: ${info.version}`] : []),
 				],
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
    "@ant-design/icons": "4.8.0",
    "@codemirror/autocomplete": "6.18.6",
    "@codemirror/lang-javascript": "6.2.3",
+    "@codemirror/state": "6.5.4",
    "@dnd-kit/core": "6.1.0",
    "@dnd-kit/modifiers": "7.0.0",
    "@dnd-kit/sortable": "8.0.0",
@@ -40,7 +41,7 @@
    "@grafana/data": "^11.2.3",
    "@mdx-js/loader": "2.3.0",
    "@mdx-js/react": "2.3.0",
-    "@monaco-editor/react": "^4.3.1",
+    "@monaco-editor/react": "~4.3.1",
    "@playwright/test": "1.55.1",
    "@radix-ui/react-tabs": "1.0.4",
    "@radix-ui/react-tooltip": "1.0.7",
@@ -97,7 +98,7 @@
    "color-alpha": "2.0.0",
    "cross-env": "^7.0.3",
    "crypto-js": "4.2.0",
-    "d3-hierarchy": "3.1.2",
+    "d3-hierarchy": "1.1.9",
    "dayjs": "^1.10.7",
    "dompurify": "3.2.4",
    "dotenv": "8.2.0",
@@ -122,6 +123,7 @@
    "overlayscrollbars-react": "^0.5.6",
    "papaparse": "5.4.1",
    "posthog-js": "1.298.0",
+    "rc-select": "~14.10.0",
    "rc-tween-one": "3.0.6",
    "react": "18.2.0",
    "react-addons-update": "15.6.3",
@@ -182,18 +184,22 @@
    "@babel/preset-env": "^7.22.14",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.21.4",
+    "@codemirror/view": "~6.5.1",
    "@commitlint/cli": "^20.4.2",
    "@commitlint/config-conventional": "^20.4.2",
    "@faker-js/faker": "9.3.0",
    "@jest/globals": "30.2.0",
+    "@jest/types": "^30.3.0",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/user-event": "14.4.3",
    "@types/color": "^3.0.3",
    "@types/crypto-js": "4.2.2",
+    "@types/d3-hierarchy": "1.1.11",
    "@types/dompurify": "^2.4.0",
    "@types/event-source-polyfill": "^1.0.0",
    "@types/fontfaceobserver": "2.1.0",
+    "@types/history": "^4.7.11",
    "@types/jest": "30.0.0",
    "@types/lodash-es": "^4.17.4",
    "@types/mini-css-extract-plugin": "^2.5.1",
@@ -212,6 +218,7 @@
    "@types/react-syntax-highlighter": "15.5.13",
    "@types/redux-mock-store": "1.0.4",
    "@types/styled-components": "^5.1.4",
+    "@types/testing-library__jest-dom": "^5.14.5",
    "@types/uuid": "^8.3.1",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
@@ -227,6 +234,7 @@
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-sonarjs": "^0.12.0",
+    "glob": "^13.0.6",
    "husky": "^7.0.4",
    "imagemin": "^8.0.1",
    "imagemin-svgo": "^10.0.1",
@@ -248,6 +256,7 @@
    "sass": "1.97.3",
    "sharp": "0.34.5",
    "svgo": "4.0.0",
+    "tailwindcss": "3",
    "ts-api-utils": "2.4.0",
    "ts-jest": "29.4.6",
    "ts-node": "^10.2.1",
@@ -281,6 +290,32 @@
    "brace-expansion": "^2.0.2",
    "on-headers": "^1.1.0",
    "tmp": "0.2.4",
-    "vite": "npm:rolldown-vite@7.3.1"
+    "vite": "npm:rolldown-vite@7.3.1",
+    "@codemirror/view": "~6.5.1",
+    "@types/d3-hierarchy": "1.1.11"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "18.0.26",
+      "@types/react-dom": "18.0.10",
+      "debug": "4.3.4",
+      "semver": "7.5.4",
+      "xml2js": "0.5.0",
+      "phin": "^3.7.1",
+      "body-parser": "1.20.3",
+      "http-proxy-middleware": "3.0.5",
+      "cross-spawn": "7.0.5",
+      "cookie": "^0.7.1",
+      "serialize-javascript": "6.0.2",
+      "prismjs": "1.30.0",
+      "got": "11.8.5",
+      "form-data": "4.0.4",
+      "brace-expansion": "^2.0.2",
+      "on-headers": "^1.1.0",
+      "tmp": "0.2.4",
+      "vite": "npm:rolldown-vite@7.3.1",
+      "@codemirror/view": "~6.5.1",
+      "@types/d3-hierarchy": "1.1.11"
+    }
  }
-}
+}
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -1,9 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
+import { fileURLToPath } from 'url';

 // Read from ".env" file.
-dotenv.config({ path: path.resolve(__dirname, '.env') });
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: path.resolve(dirname, '.env') });

 /**
 * Read environment variables from file.
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/Logos/deno.svg
+++ b/frontend/public/Logos/deno.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>
--- a/frontend/public/Logos/haystack.svg
+++ b/frontend/public/Logos/haystack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>
--- a/frontend/public/Logos/huggingface.svg
+++ b/frontend/public/Logos/huggingface.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" fill="none"><path fill="#ffd21e" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5"/><path fill="#ff9d0b" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0m-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0"/><path fill="#3a3b45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32Zm-23.55 0c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#ff323d" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3a3b45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.6 8.6 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97" clip-rule="evenodd"/><path fill="#ff9d0b" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-46.5 0a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-6.69 11c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7 7 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.3 44.3 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48m0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85"/><path fill="#ffd21e" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9-3.24 5.08.68 8.01c3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12"/><path fill="#ff9d0b" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7 7 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.3 44.3 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48m0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.5 1.5 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85"/><path fill="#ffd21e" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44-1.58 4.17-6.8 7.33c-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12"/></svg>
--- a/frontend/public/Logos/nvidia-dcgm.svg
+++ b/frontend/public/Logos/nvidia-dcgm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#76b900" viewBox="0 0 24 24"><title>NVIDIA</title><path d="M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936"/></svg>
--- a/frontend/public/Logos/ollama.svg
+++ b/frontend/public/Logos/ollama.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>
--- a/frontend/public/Logos/openrouter.svg
+++ b/frontend/public/Logos/openrouter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>
--- a/frontend/public/Logos/prometheus.svg
+++ b/frontend/public/Logos/prometheus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.94 -1.44 438.62 432.87"><path fill="#e75225" d="M215.926 7.068c115.684.024 210.638 93.784 210.493 207.844-.148 115.793-94.713 208.252-212.912 208.169C97.95 423 4.52 329.143 4.601 213.221 4.68 99.867 99.833 7.044 215.926 7.068m-63.947 73.001c2.652 12.978.076 25.082-3.846 36.988-2.716 8.244-6.47 16.183-8.711 24.539-3.694 13.769-7.885 27.619-9.422 41.701-2.21 20.25 5.795 38.086 19.493 55.822L86.527 225.94c.11 1.978-.007 2.727.21 3.361 5.968 17.43 16.471 32.115 28.243 45.957 1.246 1.465 4.082 2.217 6.182 2.221 62.782.115 125.565.109 188.347.028 1.948-.003 4.546-.369 5.741-1.618 13.456-14.063 23.746-30.079 30.179-50.257l-66.658 12.976c4.397-8.567 9.417-16.1 12.302-24.377 9.869-28.315 5.779-55.69-8.387-81.509-11.368-20.72-21.854-41.349-16.183-66.32-12.005 11.786-16.615 26.79-19.541 42.253-2.882 15.23-4.58 30.684-6.811 46.136-.317-.467-.728-.811-.792-1.212-.258-1.621-.499-3.255-.587-4.893-1.355-25.31-6.328-49.696-16.823-72.987-6.178-13.71-12.99-27.727-6.622-44.081-4.31 2.259-8.205 4.505-10.997 7.711-8.333 9.569-11.779 21.062-12.666 33.645-.757 10.75-1.796 21.552-3.801 32.123-2.107 11.109-5.448 21.998-12.956 32.209-3.033-21.81-3.37-43.38-22.928-57.237m161.877 216.523H116.942v34.007h196.914zm-157.871 51.575c-.163 28.317 28.851 49.414 64.709 47.883 29.716-1.269 56.016-24.51 53.755-47.883z"/></svg>
--- a/frontend/public/Logos/slurm.svg
+++ b/frontend/public/Logos/slurm.svg
--- a/frontend/public/Logos/statsd.svg
+++ b/frontend/public/Logos/statsd.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.88 103.53"><path d="M5.47 0H117.4c3.01 0 5.47 2.46 5.47 5.47v92.58c0 3.01-2.46 5.47-5.47 5.47H5.47c-3.01 0-5.47-2.46-5.47-5.47V5.47C0 2.46 2.46 0 5.47 0m26.37 38.55 17.79 18.42 2.14 2.13-2.12 2.16-17.97 19.05-5.07-5 15.85-16.15L26.81 43.6zM94.1 79.41H54.69v-6.84H94.1zM38.19 9.83c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78S35 9.83 38.19 9.83m-19.24 0c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78 2.58-5.78 5.78-5.78M7.49 5.41H115.4c1.15 0 2.09.94 2.09 2.09v18.32H5.4V7.5c0-1.15.94-2.09 2.09-2.09" style="fill-rule:evenodd;clip-rule:evenodd;fill:#1668dc"/></svg>
--- a/frontend/scripts/generate-permissions-type.cjs
+++ b/frontend/scripts/generate-permissions-type.cjs
@@ -180,7 +180,7 @@ async function main() {
 			PERMISSIONS_TYPE_FILE,
 		);
 		log('Linting generated file...');
-		execSync(`cd frontend && yarn eslint --fix ${relativePath}`, {
+		execSync(`cd frontend && pnpm eslint --fix ${relativePath}`, {
 			cwd: rootDir,
 			stdio: 'inherit',
 		});
--- a/frontend/scripts/post-types-generation.sh
+++ b/frontend/scripts/post-types-generation.sh
@@ -25,7 +25,7 @@ echo "\n✅ Prettier formatting successful"

 # Fix linting issues
 echo "\n\n---\nRunning eslint...\n"
-if ! yarn lint --fix --quiet src/api/generated; then
+if ! pnpm lint --fix --quiet src/api/generated; then
  echo "ESLint check failed! Please fix linting errors before proceeding."
  exit 1
 fi
--- a/frontend/src/AppRoutes/Private.tsx
+++ b/frontend/src/AppRoutes/Private.tsx
@@ -1,6 +1,6 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
+import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -236,13 +236,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	useEffect(() => {
 		// if it is an old route navigate to the new route
 		if (isOldRoute) {
-			const redirectUrl = oldNewRoutesMapping[pathname];
-
-			const newLocation = {
-				...location,
-				pathname: redirectUrl,
-			};
-			history.replace(newLocation);
+			// this will be handled by the redirect component below
 			return;
 		}

@@ -296,6 +290,19 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);

+	if (isOldRoute) {
+		const redirectUrl = oldNewRoutesMapping[pathname];
+		return (
+			<Redirect
+				to={{
+					pathname: redirectUrl,
+					search: location.search,
+					hash: location.hash,
+				}}
+			/>
+		);
+	}
+
 	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }
--- a/frontend/src/api/generated/services/authdomains/index.ts
+++ b/frontend/src/api/generated/services/authdomains/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/authz/index.ts
+++ b/frontend/src/api/generated/services/authz/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/features/index.ts
+++ b/frontend/src/api/generated/services/features/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/fields/index.ts
+++ b/frontend/src/api/generated/services/fields/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/gateway/index.ts
+++ b/frontend/src/api/generated/services/gateway/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/global/index.ts
+++ b/frontend/src/api/generated/services/global/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/logs/index.ts
+++ b/frontend/src/api/generated/services/logs/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/metrics/index.ts
+++ b/frontend/src/api/generated/services/metrics/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/orgs/index.ts
+++ b/frontend/src/api/generated/services/orgs/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/preferences/index.ts
+++ b/frontend/src/api/generated/services/preferences/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/querier/index.ts
+++ b/frontend/src/api/generated/services/querier/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/role/index.ts
+++ b/frontend/src/api/generated/services/role/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/serviceaccount/index.ts
+++ b/frontend/src/api/generated/services/serviceaccount/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/sessions/index.ts
+++ b/frontend/src/api/generated/services/sessions/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 export interface AuthtypesAttributeMappingDTO {
--- a/frontend/src/api/generated/services/users/index.ts
+++ b/frontend/src/api/generated/services/users/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/api/generated/services/zeus/index.ts
+++ b/frontend/src/api/generated/services/zeus/index.ts
@@ -1,7 +1,7 @@
 /**
 * ! Do not edit manually
 * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
 import type {
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
+++ b/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 {
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx
+++ b/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');

--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/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>
 	);
 }
--- a/frontend/src/components/CustomTimePicker/tests/customTimePickerZoomOut.test.tsx
+++ b/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();
+	});
+});
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx
@@ -361,6 +361,58 @@ describe('CheckboxFilter - User Flows', () => {
 		expect(filtersForServiceName).toHaveLength(0);
 	});

+	it('should match filter when query uses resource. prefix (resource.service.name matches service.name)', async () => {
+		// Filter config uses unprefixed key (service.name)
+		// Query has filter with resource. prefix (resource.service.name)
+		// Checkbox should recognize the match and show checked state
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: 'resource.service.name',
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: [OTEL_DEMO],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData: jest.fn(),
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: false });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Filter should auto-open because it has active filters (key match via prefix stripping)
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+		});
+
+		// otel-demo should be checked (filter uses resource.service.name IN [otel-demo])
+		// Checked items are sorted to the top, so otel-demo is first
+		const checkboxes = screen.getAllByRole('checkbox');
+		expect(checkboxes[0]).toBeChecked();
+		expect(screen.getByText(OTEL_DEMO)).toBeInTheDocument();
+	});
+
 	it('should extend an existing IN filter when checking an additional value', async () => {
 		const redirectWithQueryBuilderData = jest.fn();

--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -18,7 +18,7 @@ import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues'
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -26,6 +26,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';

 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
+import { isKeyMatch } from './utils';

 import './Checkbox.styles.scss';

@@ -84,7 +85,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			currentQuery.builder.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.some((item) =>
-				isEqual(item.key?.key, filter.attributeKey.key),
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
 			),
 		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
 	);
@@ -189,7 +190,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
 		]?.filters?.items.find((item) =>
-			isEqual(item.key?.key, filter.attributeKey.key),
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
 		);

 		if (filterSync) {
@@ -236,7 +237,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			(currentQuery?.builder?.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.filter((item) =>
-				isEqual(item.key?.key, filter.attributeKey.key),
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
 			)?.length || 0) > 1,

 		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
@@ -280,7 +281,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 						items:
 							idx === activeQueryIndex
 								? item.filters?.items?.filter(
-										(fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
+										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
 								  ) || []
 								: [...(item.filters?.items || [])],
 						op: item.filters?.op || 'AND',
@@ -313,7 +314,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					: 'Only'
 				: 'Only';
 			query.filters.items = query.filters.items.filter(
-				(q) => !isEqual(q.key?.key, filter.attributeKey.key),
+				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
 			);

 			if (query.filter?.expression) {
@@ -335,13 +336,13 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		} else if (query?.filters?.items) {
 			if (
 				query.filters?.items?.some((item) =>
-					isEqual(item.key?.key, filter.attributeKey.key),
+					isKeyMatch(item.key?.key, filter.attributeKey.key),
 				)
 			) {
 				// if there is already a running filter for the current attribute key then
 				// we split the cases by which particular operator is present right now!
 				const currentFilter = query.filters?.items?.find((q) =>
-					isEqual(q.key?.key, filter.attributeKey.key),
+					isKeyMatch(q.key?.key, filter.attributeKey.key),
 				);
 				if (currentFilter) {
 					const runningOperator = currentFilter?.op;
@@ -356,7 +357,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -368,7 +369,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -385,11 +386,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {

 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 										);
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -398,7 +399,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 								} else {
 									// if not an array remove the whole thing altogether!
 									query.filters.items = query.filters.items.filter(
-										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -414,7 +415,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -426,7 +427,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -441,7 +442,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									};
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 										);
 										if (query.filter?.expression) {
 											query.filter.expression = removeKeysFromExpression(
@@ -451,7 +452,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										}
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -469,7 +470,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										);
 									}
 									query.filters.items = query.filters.items.filter(
-										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -482,14 +483,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (!checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;
@@ -501,14 +502,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts
@@ -0,0 +1,41 @@
+/**
+ * These prefixes are added to attribute keys based on their context.
+ */
+export const FIELD_CONTEXT_PREFIXES = [
+	'metric',
+	'log',
+	'span',
+	'trace',
+	'resource',
+	'scope',
+	'attribute',
+	'event',
+	'body',
+];
+
+/**
+ * Removes the field context prefix from a key to get the base key name.
+ * Example: 'resource.service.name' -> 'service.name'
+ * Example: 'attribute.http.method' -> 'http.method'
+ */
+export function getKeyWithoutPrefix(key: string | undefined): string {
+	if (!key) {
+		return '';
+	}
+	const prefixPattern = new RegExp(
+		`^(${FIELD_CONTEXT_PREFIXES.join('|')})\\.`,
+		'i',
+	);
+	return key.replace(prefixPattern, '').trim();
+}
+
+/**
+ * Compares two keys by their base name (without prefix).
+ * This ensures that 'service.name' matches 'resource.service.name'
+ */
+export function isKeyMatch(
+	itemKey: string | undefined,
+	filterKey: string | undefined,
+): boolean {
+	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
+}
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -55,4 +55,5 @@ export enum QueryParams {
 	source = 'source',
 	showClassicCreateAlertsPage = 'showClassicCreateAlertsPage',
 	isTestAlert = 'isTestAlert',
+	yAxisUnit = 'yAxisUnit',
 }
--- a/frontend/src/container/DashboardContainer/DashboardDescription/tests/DashboardDescription.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/tests/DashboardDescription.test.tsx
@@ -193,7 +193,6 @@ describe('Dashboard landing page actions header tests', () => {
 			handleDashboardLockToggle: jest.fn(),
 			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,
-			dashboardId: '4',
 			layouts: [],
 			panelMap: {},
 			setPanelMap: jest.fn(),
@@ -205,8 +204,6 @@ describe('Dashboard landing page actions header tests', () => {
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),
-			selectedRowWidgetId: null,
-			setSelectedRowWidgetId: jest.fn(),
 			isDashboardFetching: false,
 			columnWidths: {},
 			setColumnWidths: jest.fn(),
--- a/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
@@ -78,7 +78,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		isDashboardLocked,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
-		setSelectedRowWidgetId,
 		handleDashboardLockToggle,
 	} = useDashboard();

@@ -146,7 +145,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);

 	const onEmptyWidgetHandler = useCallback(() => {
-		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts
@@ -67,17 +67,18 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 							const oldVariables = prev?.data.variables;
 							// this is added to handle case where we have two different
 							// schemas for variable response
-							if (oldVariables?.[id]) {
-								oldVariables[id] = {
-									...oldVariables[id],
+							const updatedVariables = { ...oldVariables };
+							if (updatedVariables?.[id]) {
+								updatedVariables[id] = {
+									...updatedVariables[id],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
 								};
 							}
-							if (oldVariables?.[name]) {
-								oldVariables[name] = {
-									...oldVariables[name],
+							if (updatedVariables?.[name]) {
+								updatedVariables[name] = {
+									...updatedVariables[name],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
@@ -87,9 +88,7 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 								...prev,
 								data: {
 									...prev?.data,
-									variables: {
-										...oldVariables,
-									},
+									variables: updatedVariables,
 								},
 							};
 						}
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
@@ -6,7 +6,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';

@@ -62,7 +61,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts
@@ -11,7 +11,6 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 import { AlignedData } from 'uplot';

 import { PanelMode } from '../types';
@@ -44,7 +43,7 @@ export function prepareBarPanelConfig({
 	currentQuery: Query;
 	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
@@ -76,13 +75,17 @@ export function prepareBarPanelConfig({
 		stepInterval: minStepInterval,
 	});

+	if (!(apiResponse && apiResponse?.data?.result)) {
+		// if no data, return the builder without adding any series
+		return builder;
+	}
+
 	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}

-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
+	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query
--- a/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
@@ -6,7 +6,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';

 import Histogram from '../../charts/Histogram/Histogram';
@@ -39,7 +38,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 		return prepareHistogramPanelConfig({
 			widget,
 			isDarkMode,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			panelMode,
 		});
 	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
@@ -49,7 +48,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 			return [];
 		}
 		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			bucketWidth: widget?.bucketWidth,
 			bucketCount: widget?.bucketCount,
 			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
--- a/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts
@@ -149,7 +149,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode,
 }: {
 	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	panelMode: PanelMode;
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
@@ -204,7 +204,7 @@ export function prepareHistogramPanelConfig({
 			fillColor: '#4E74F8',
 			isDarkMode,
 		});
-	} else {
+	} else if (apiResponse && apiResponse?.data?.result) {
 		apiResponse.data.result.forEach((series) => {
 			const baseLabelName = getLabelName(
 				series.metric,
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
@@ -9,7 +9,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';

@@ -68,7 +67,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
@@ -68,11 +68,12 @@ export const prepareUPlotConfig = ({
 	currentQuery: Query;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
 	maxTimeScale?: number;
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 }): UPlotConfigBuilder => {
 	const stepIntervals: ExecStats['stepIntervals'] = get(
 		apiResponse,
@@ -100,7 +101,12 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});

-	apiResponse.data?.result?.forEach((series) => {
+	if (!(apiResponse && apiResponse.data.result)) {
+		// if no data, return the builder without adding any series
+		return builder;
+	}
+
+	apiResponse.data.result.forEach((series) => {
 		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,
--- a/frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts
@@ -18,7 +18,7 @@ import { PanelMode } from '../types';
 export interface BaseConfigBuilderProps {
 	id: string;
 	thresholds?: ThresholdProps[];
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;
--- a/frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx
+++ b/frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx
@@ -19,7 +19,6 @@ export default function DashboardEmptyState(): JSX.Element {
 		selectedDashboard,
 		isDashboardLocked,
 		handleToggleDashboardSlider,
-		setSelectedRowWidgetId,
 	} = useDashboard();

 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
@@ -42,7 +41,6 @@ export default function DashboardEmptyState(): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);

 	const onEmptyWidgetHandler = useCallback(() => {
-		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -71,7 +71,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		isDashboardLocked,
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
-		setSelectedRowWidgetId,
 		isDashboardFetching,
 		columnWidths,
 	} = useDashboard();
@@ -195,7 +194,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {

 		updateDashboardMutation.mutate(updatedDashboard, {
 			onSuccess: (updatedDashboard) => {
-				setSelectedRowWidgetId(null);
 				if (updatedDashboard.data) {
 					if (updatedDashboard.data.data.layout) {
 						setLayouts(sortLayout(updatedDashboard.data.data.layout));
--- a/frontend/src/container/GridCardLayout/WidgetRow.tsx
+++ b/frontend/src/container/GridCardLayout/WidgetRow.tsx
@@ -5,6 +5,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import { EllipsisIcon, PenLine, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { setSelectedRowWidgetId } from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';

@@ -37,7 +38,6 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 		handleToggleDashboardSlider,
 		selectedDashboard,
 		isDashboardLocked,
-		setSelectedRowWidgetId,
 	} = useDashboard();

 	const permissions: ComponentTypes[] = ['add_panel'];
@@ -81,7 +81,12 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 							disabled={!editWidget && addPanelPermission && !isDashboardLocked}
 							icon={<Plus size={14} />}
 							onClick={(): void => {
-								setSelectedRowWidgetId(id);
+								// TODO: @AshwinBhatkal Simplify this check in cleanup of https://github.com/SigNoz/engineering-pod/issues/3953
+								if (!selectedDashboard?.id) {
+									return;
+								}
+
+								setSelectedRowWidgetId(selectedDashboard.id, id);
 								handleToggleDashboardSlider(true);
 							}}
 						>
--- a/frontend/src/container/LogsExplorerChart/tests/frequencyGraphColor.test.ts
+++ b/frontend/src/container/LogsExplorerChart/tests/frequencyGraphColor.test.ts
@@ -4,8 +4,8 @@ import { getColorsForSeverityLabels, isRedLike } from '../utils';

 describe('getColorsForSeverityLabels', () => {
 	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_VANILLA_400);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_VANILLA_400);
 	});

 	it('should return correct colors for known severity variants', () => {
--- a/frontend/src/container/LogsExplorerChart/utils.ts
+++ b/frontend/src/container/LogsExplorerChart/utils.ts
@@ -79,7 +79,7 @@ export function getColorsForSeverityLabels(
 	const trimmed = label.trim();

 	if (!trimmed) {
-		return Color.BG_SLATE_300;
+		return Color.BG_VANILLA_400; // Default color for empty labels
 	}

 	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
@@ -119,6 +119,6 @@ export function getColorsForSeverityLabels(

 	return (
 		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
+		Color.BG_VANILLA_400
 	);
 }
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -39,6 +39,7 @@ import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQuery
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQueryData from 'hooks/useUrlQueryData';
+import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
 import { UpdateTimeInterval } from 'store/actions';
@@ -59,6 +60,7 @@ import LogsActionsContainer from './LogsActionsContainer';

 import './LogsExplorerViews.styles.scss';

+// eslint-disable-next-line sonarjs/cognitive-complexity
 function LogsExplorerViewsContainer({
 	setIsLoadingQueries,
 	listQueryKeyRef,
@@ -109,7 +111,7 @@ function LogsExplorerViewsContainer({

 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');

-	const [yAxisUnit, setYAxisUnit] = useState<string>('');
+	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');

 	const listQuery = useMemo(() => getListQuery(stagedQuery) || null, [
 		stagedQuery,
@@ -367,10 +369,6 @@ function LogsExplorerViewsContainer({
 		orderBy,
 	]);

-	const onUnitChangeHandler = useCallback((value: string): void => {
-		setYAxisUnit(value);
-	}, []);
-
 	const chartData = useMemo(() => {
 		if (!stagedQuery) {
 			return [];
@@ -488,10 +486,7 @@ function LogsExplorerViewsContainer({
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
 							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter
-									onChange={onUnitChangeHandler}
-									yAxisUnit={yAxisUnit}
-								/>
+								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,6 +11,7 @@ import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsF
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -22,14 +23,13 @@ import { GlobalReducer } from 'types/reducer/globalTime';

 function TimeSeries(): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
+	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');

 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);

-	const [yAxisUnit, setYAxisUnit] = useState<string>('');
-
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];

@@ -112,10 +112,6 @@ function TimeSeries(): JSX.Element {
 		[data, isValidToConvertToMs],
 	);

-	const onUnitChangeHandler = (value: string): void => {
-		setYAxisUnit(value);
-	};
-
 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
@@ -123,7 +119,7 @@ function TimeSeries(): JSX.Element {

 	return (
 		<div className="meter-time-series-container">
-			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
 				{hasMetricSelected &&
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -34,6 +34,10 @@ import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import {
+	clearSelectedRowWidgetId,
+	getSelectedRowWidgetId,
+} from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import {
 	getNextWidgets,
 	getPreviousWidgets,
@@ -86,8 +90,6 @@ function NewWidget({
 		selectedDashboard,
 		setSelectedDashboard,
 		setToScrollWidgetId,
-		selectedRowWidgetId,
-		setSelectedRowWidgetId,
 		columnWidths,
 	} = useDashboard();

@@ -450,6 +452,8 @@ function NewWidget({
 		const widgetId = query.get('widgetId') || '';
 		let updatedLayout = selectedDashboard.data.layout || [];

+		const selectedRowWidgetId = getSelectedRowWidgetId(dashboardId);
+
 		if (isNewDashboard && isEmpty(selectedRowWidgetId)) {
 			const newLayoutItem = placeWidgetAtBottom(widgetId, updatedLayout);
 			updatedLayout = [...updatedLayout, newLayoutItem];
@@ -554,7 +558,6 @@ function NewWidget({

 		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: (updatedDashboard) => {
-				setSelectedRowWidgetId(null);
 				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
 				safeNavigate({
@@ -566,7 +569,6 @@ function NewWidget({
 		selectedDashboard,
 		query,
 		isNewDashboard,
-		selectedRowWidgetId,
 		afterWidgets,
 		selectedWidget,
 		selectedTime.enum,
@@ -577,7 +579,6 @@ function NewWidget({
 		widgets,
 		setSelectedDashboard,
 		setToScrollWidgetId,
-		setSelectedRowWidgetId,
 		safeNavigate,
 		dashboardId,
 	]);
@@ -681,6 +682,10 @@ function NewWidget({
 		 * on mount here with the currentQuery in the begining itself
 		 */
 		setSupersetQuery(currentQuery);
+
+		return (): void => {
+			clearSelectedRowWidgetId(dashboardId);
+		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

--- a/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
+++ b/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
@@ -619,6 +619,11 @@ function OnboardingAddDataSource(): JSX.Element {
 		);
 	};

+	const progressText = `Get Started (${Math.min(
+		currentStep + 1,
+		setupStepItems.length,
+	)}/${setupStepItems.length})`;
+
 	return (
 		<div className="onboarding-v2">
 			<Layout>
@@ -639,7 +644,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									history.push(ROUTES.HOME);
 								}}
 							/>
-							<Typography.Text>Get Started (2/4)</Typography.Text>
+							<Typography.Text>{progressText}</Typography.Text>
 						</div>

 						<div className="header-right-section">
--- a/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json
+++ b/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json
@@ -611,6 +611,34 @@
 			]
 		}
 	},
+	{
+		"dataSource": "deno",
+		"label": "Deno",
+		"imgUrl": "/Logos/deno.svg",
+		"tags": [
+			"apm/traces",
+			"logs",
+			"metrics"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"deno",
+			"deno monitoring",
+			"deno observability",
+			"javascript",
+			"js",
+			"ts",
+			"typescript",
+			"opentelemetry deno",
+			"observability",
+			"metrics",
+			"logs",
+			"traces",
+			"tracing"
+		],
+		"id": "deno",
+		"link": "/docs/instrumentation/opentelemetry-deno/"
+	},
 	{
 		"dataSource": "javascript",
 		"label": "JavaScript",
@@ -1828,15 +1856,33 @@
 		],
 		"module": "logs",
 		"relatedSearchKeywords": [
+			"apache",
 			"application log file collection",
+			"c#",
+			"c++",
 			"collect",
 			"collect logs from file",
 			"collect logs from log file",
+			"cpp",
+			"csharp",
 			"custom log file monitoring",
+			"deno",
+			"django",
+			"dotnet",
+			"elixir",
+			"express",
 			"file",
 			"file based logging",
 			"filebeat alternative",
+			"flask",
 			"from-log-file",
+			"go",
+			"golang",
+			"java",
+			"javascript",
+			"js",
+			"kotlin",
+			"linux",
 			"log",
 			"log file ingestion",
 			"log file to signoz",
@@ -1844,7 +1890,29 @@
 			"log tailing with otel",
 			"logging",
 			"logs",
-			"otel file logs"
+			"macos",
+			"mongodb",
+			"mysql",
+			"nestjs",
+			"nextjs",
+			"nginx",
+			"otel file logs",
+			"php",
+			"postgres",
+			"postgresql",
+			"python",
+			"rails",
+			"react",
+			"redis",
+			"ruby",
+			"rust",
+			"scala",
+			"spring",
+			"swift",
+			"ts",
+			"typescript",
+			"vue",
+			"windows"
 		],
 		"link": "/docs/userguide/collect_logs_from_file/"
 	},
@@ -5208,7 +5276,7 @@
 	{
 		"dataSource": "prometheus-metrics",
 		"label": "Prometheus Metrics",
-		"imgUrl": "/Logos/other-metrics.svg",
+		"imgUrl": "/Logos/prometheus.svg",
 		"tags": [
 			"metrics",
 			"infrastructure monitoring"
@@ -5809,5 +5877,250 @@
 				}
 			]
 		}
+	},
+	{
+		"dataSource": "rust-metrics",
+		"label": "Rust Metrics",
+		"imgUrl": "/Logos/rust.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"metrics",
+			"opentelemetry rust",
+			"otel rust",
+			"rust",
+			"rust metrics",
+			"rust monitoring",
+			"rust observability"
+		],
+		"id": "rust-metrics",
+		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/",
+		"question": {
+			"desc": "What is your Environment?",
+			"type": "select",
+			"entityID": "environment",
+			"options": [
+				{
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				},
+				{
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				},
+				{
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				}
+			]
+		}
+	},
+	{
+		"dataSource": "ruby-metrics",
+		"label": "Ruby Metrics",
+		"imgUrl": "/Logos/ruby-on-rails.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"metrics",
+			"opentelemetry ruby",
+			"otel ruby",
+			"ruby",
+			"ruby metrics",
+			"ruby monitoring",
+			"ruby observability",
+			"ruby on rails metrics"
+		],
+		"id": "ruby-metrics",
+		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/",
+		"question": {
+			"desc": "What is your Environment?",
+			"type": "select",
+			"entityID": "environment",
+			"options": [
+				{
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				},
+				{
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				},
+				{
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				}
+			]
+		}
+	},
+	{
+		"dataSource": "statsd",
+		"label": "StatsD",
+		"imgUrl": "/Logos/statsd.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"metrics",
+			"statsd",
+			"statsd metrics",
+			"statsd monitoring",
+			"statsd observability"
+		],
+		"id": "statsd",
+		"link": "/docs/userguide/opentelemetry-statsd/"
+	},
+	{
+		"dataSource": "nvidia-dcgm",
+		"label": "Nvidia DCGM",
+		"imgUrl": "/Logos/nvidia-dcgm.svg",
+		"tags": [
+			"infrastructure monitoring"
+		],
+		"module": "infra-monitoring-hosts",
+		"relatedSearchKeywords": [
+			"dcgm",
+			"gpu monitoring",
+			"infrastructure monitoring",
+			"nvidia",
+			"nvidia dcgm",
+			"nvidia metrics"
+		],
+		"id": "nvidia-dcgm",
+		"link": "/docs/metrics-management/nvidia-dcgm-metrics/"
+	},
+	{
+		"dataSource": "slurm",
+		"label": "Slurm",
+		"imgUrl": "/Logos/slurm.svg",
+		"tags": [
+			"infrastructure monitoring"
+		],
+		"module": "infra-monitoring-hosts",
+		"relatedSearchKeywords": [
+			"infrastructure monitoring",
+			"slurm",
+			"slurm cluster monitoring",
+			"slurm metrics"
+		],
+		"id": "slurm",
+		"link": "/docs/metrics-management/slurm-metrics/"
+	},
+	{
+		"dataSource": "ollama-monitoring",
+		"label": "Ollama",
+		"imgUrl": "/Logos/ollama.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"ollama",
+			"ollama monitoring",
+			"otel ollama",
+			"traces",
+			"tracing"
+		],
+		"id": "ollama-monitoring",
+		"link": "/docs/ollama-monitoring/"
+	},
+	{
+		"dataSource": "haystack-monitoring",
+		"label": "Haystack",
+		"imgUrl": "/Logos/haystack.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"haystack",
+			"haystack monitoring",
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"otel haystack",
+			"traces",
+			"tracing"
+		],
+		"id": "haystack-monitoring",
+		"link": "/docs/haystack-monitoring/"
+	},
+	{
+		"dataSource": "openrouter-observability",
+		"label": "OpenRouter",
+		"imgUrl": "/Logos/openrouter.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"openrouter",
+			"openrouter monitoring",
+			"otel openrouter",
+			"traces",
+			"tracing"
+		],
+		"id": "openrouter-observability",
+		"link": "/docs/openrouter-observability/"
+	},
+	{
+		"dataSource": "huggingface-observability",
+		"label": "Hugging Face",
+		"imgUrl": "/Logos/huggingface.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"hugging face monitoring",
+			"huggingface",
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"otel huggingface",
+			"traces",
+			"tracing"
+		],
+		"id": "huggingface-observability",
+		"link": "/docs/huggingface-observability/"
 	}
 ]
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
+++ b/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' && (
--- a/frontend/src/hooks/tests/useZoomOut.test.ts
+++ b/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);
+	});
+});
--- a/frontend/src/hooks/useGetQueryLabels.test.ts
+++ b/frontend/src/hooks/useGetQueryLabels.test.ts
@@ -0,0 +1,129 @@
+import { renderHook } from '@testing-library/react';
+import {
+	IBuilderFormula,
+	IClickHouseQuery,
+	IPromQLQuery,
+	Query,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+
+import { useGetQueryLabels } from './useGetQueryLabels';
+
+jest.mock('components/QueryBuilderV2/utils', () => ({
+	getQueryLabelWithAggregation: jest.fn(() => []),
+}));
+
+function buildQuery(overrides: Partial<Query> = {}): Query {
+	return {
+		id: 'test-id',
+		queryType: EQueryType.QUERY_BUILDER,
+		builder: {
+			queryData: [],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		promql: [],
+		clickhouse_sql: [],
+		...overrides,
+	};
+}
+
+describe('useGetQueryLabels', () => {
+	describe('QUERY_BUILDER type', () => {
+		it('returns empty array when queryFormulas is undefined', () => {
+			const query = buildQuery({
+				queryType: EQueryType.QUERY_BUILDER,
+				builder: {
+					queryData: [],
+					queryFormulas: (undefined as unknown) as IBuilderFormula[],
+					queryTraceOperator: [],
+				},
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([]);
+		});
+
+		it('returns formula labels when queryFormulas is populated', () => {
+			const query = buildQuery({
+				queryType: EQueryType.QUERY_BUILDER,
+				builder: {
+					queryData: [],
+					queryFormulas: [
+						({ queryName: 'F1' } as unknown) as IBuilderFormula,
+						({ queryName: 'F2' } as unknown) as IBuilderFormula,
+					],
+					queryTraceOperator: [],
+				},
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([
+				{ label: 'F1', value: 'F1' },
+				{ label: 'F2', value: 'F2' },
+			]);
+		});
+	});
+
+	describe('CLICKHOUSE type', () => {
+		it('returns empty array when clickhouse_sql is undefined', () => {
+			const query = buildQuery({
+				queryType: EQueryType.CLICKHOUSE,
+				clickhouse_sql: (undefined as unknown) as IClickHouseQuery[],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([]);
+		});
+
+		it('returns labels from clickhouse_sql when populated', () => {
+			const query = buildQuery({
+				queryType: EQueryType.CLICKHOUSE,
+				clickhouse_sql: [
+					({ name: 'query_a' } as unknown) as IClickHouseQuery,
+					({ name: 'query_b' } as unknown) as IClickHouseQuery,
+				],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([
+				{ label: 'query_a', value: 'query_a' },
+				{ label: 'query_b', value: 'query_b' },
+			]);
+		});
+	});
+
+	describe('PROM type (default)', () => {
+		it('returns empty array when promql is undefined', () => {
+			const query = buildQuery({
+				queryType: EQueryType.PROM,
+				promql: (undefined as unknown) as IPromQLQuery[],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([]);
+		});
+
+		it('returns labels from promql when populated', () => {
+			const query = buildQuery({
+				queryType: EQueryType.PROM,
+				promql: [
+					({ name: 'prom_1' } as unknown) as IPromQLQuery,
+					({ name: 'prom_2' } as unknown) as IPromQLQuery,
+				],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([
+				{ label: 'prom_1', value: 'prom_1' },
+				{ label: 'prom_2', value: 'prom_2' },
+			]);
+		});
+	});
+});
--- a/frontend/src/hooks/useGetQueryLabels.ts
+++ b/frontend/src/hooks/useGetQueryLabels.ts
@@ -11,7 +11,7 @@ export const useGetQueryLabels = (
 			const queryLabels = getQueryLabelWithAggregation(
 				currentQuery?.builder?.queryData || [],
 			);
-			const formulaLabels = currentQuery?.builder?.queryFormulas?.map(
+			const formulaLabels = (currentQuery?.builder?.queryFormulas ?? []).map(
 				(formula) => ({
 					label: formula.queryName,
 					value: formula.queryName,
@@ -20,10 +20,13 @@ export const useGetQueryLabels = (
 			return [...queryLabels, ...formulaLabels];
 		}
 		if (currentQuery?.queryType === EQueryType.CLICKHOUSE) {
-			return currentQuery?.clickhouse_sql?.map((q) => ({
+			return (currentQuery?.clickhouse_sql ?? []).map((q) => ({
 				label: q.name,
 				value: q.name,
 			}));
 		}
-		return currentQuery?.promql?.map((q) => ({ label: q.name, value: q.name }));
+		return (currentQuery?.promql ?? []).map((q) => ({
+			label: q.name,
+			value: q.name,
+		}));
 	}, [currentQuery]);
--- a/frontend/src/hooks/useUrlYAxisUnit.ts
+++ b/frontend/src/hooks/useUrlYAxisUnit.ts
@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { QueryParams } from 'constants/query';
+import { parseAsString, useQueryState } from 'nuqs';
+
+interface UseUrlYAxisUnitResult {
+	yAxisUnit: string;
+	onUnitChange: (value: string) => void;
+}
+
+/**
+ * Hook to manage y-axis unit synchronized with the URL query param.
+ * It:
+ * - Initializes from `QueryParams.yAxisUnit` or a provided default
+ * - Keeps local state in sync when the URL changes (e.g. back/forward, shared links)
+ * - Writes updates back to the URL while preserving existing query params
+ */
+function useUrlYAxisUnit(defaultUnit = ''): UseUrlYAxisUnitResult {
+	const [yAxisUnit, setYAxisUnitInUrl] = useQueryState(
+		QueryParams.yAxisUnit,
+		parseAsString.withDefault(defaultUnit),
+	);
+
+	const onUnitChange = useCallback(
+		(value: string): void => {
+			setYAxisUnitInUrl(value || null);
+		},
+		[setYAxisUnitInUrl],
+	);
+
+	return { yAxisUnit, onUnitChange };
+}
+
+export default useUrlYAxisUnit;
--- a/frontend/src/hooks/useZoomOut.ts
+++ b/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,
+	]);
+}
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { ThemeProvider } from 'hooks/useDarkMode';
+import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
@@ -45,17 +46,19 @@ if (container) {

 	root.render(
 		<HelmetProvider>
-			<ThemeProvider>
-				<TimezoneProvider>
-					<QueryClientProvider client={queryClient}>
-						<Provider store={store}>
-							<AppProvider>
-								<AppRoutes />
-							</AppProvider>
-						</Provider>
-					</QueryClientProvider>
-				</TimezoneProvider>
-			</ThemeProvider>
+			<NuqsAdapter>
+				<ThemeProvider>
+					<TimezoneProvider>
+						<QueryClientProvider client={queryClient}>
+							<Provider store={store}>
+								<AppProvider>
+									<AppRoutes />
+								</AppProvider>
+							</Provider>
+						</QueryClientProvider>
+					</TimezoneProvider>
+				</ThemeProvider>
+			</NuqsAdapter>
 		</HelmetProvider>,
 	);
 }
--- a/frontend/src/lib/tests/zoomOutUtils.test.ts
+++ b/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);
+		});
+	});
+});
--- a/frontend/src/lib/zoomOutUtils.ts
+++ b/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,
+	};
+}
--- a/frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx
+++ b/frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx
@@ -4,7 +4,6 @@ import {
 	SetStateAction,
 	useEffect,
 	useMemo,
-	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -16,6 +15,7 @@ import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
@@ -52,13 +52,8 @@ function TimeSeriesViewContainer({
 		return isValid.every(Boolean);
 	}, [currentQuery]);

-	const [yAxisUnit, setYAxisUnit] = useState<string>(
-		isValidToConvertToMs ? 'ms' : 'short',
-	);
-
-	const onUnitChangeHandler = (value: string): void => {
-		setYAxisUnit(value);
-	};
+	const defaultUnit = isValidToConvertToMs ? 'ms' : 'short';
+	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit(defaultUnit);

 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
@@ -121,7 +116,7 @@ function TimeSeriesViewContainer({
 	return (
 		<div className="trace-explorer-time-series-view-container">
 			<div className="trace-explorer-time-series-view-container-header">
-				<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+				<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			</div>
 			<TimeSeriesView
 				isFilterApplied={isFilterApplied}
--- a/frontend/src/providers/Dashboard/Dashboard.tsx
+++ b/frontend/src/providers/Dashboard/Dashboard.tsx
@@ -68,7 +68,6 @@ export const DashboardContext = createContext<IDashboardContext>({
 		APIError
 	>,
 	selectedDashboard: {} as Dashboard,
-	dashboardId: '',
 	layouts: [],
 	panelMap: {},
 	setPanelMap: () => {},
@@ -81,8 +80,6 @@ export const DashboardContext = createContext<IDashboardContext>({
 	updateLocalStorageDashboardVariables: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
-	selectedRowWidgetId: '',
-	setSelectedRowWidgetId: () => {},
 	isDashboardFetching: false,
 	columnWidths: {},
 	setColumnWidths: () => {},
@@ -102,10 +99,6 @@ export function DashboardProvider({

 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);

-	const [selectedRowWidgetId, setSelectedRowWidgetId] = useState<string | null>(
-		null,
-	);
-
 	const [
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
@@ -468,8 +461,6 @@ export function DashboardProvider({
 			updateLocalStorageDashboardVariables,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
-			selectedRowWidgetId,
-			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,
@@ -488,8 +479,6 @@ export function DashboardProvider({
 			currentDashboard,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
-			selectedRowWidgetId,
-			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,
--- a/frontend/src/providers/Dashboard/tests/Dashboard.test.tsx
+++ b/frontend/src/providers/Dashboard/tests/Dashboard.test.tsx
@@ -58,8 +58,9 @@ jest.mock('react-redux', () => ({
 jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));

 function TestComponent(): JSX.Element {
-	const { dashboardResponse, dashboardId, selectedDashboard } = useDashboard();
+	const { dashboardResponse, selectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
+	const dashboardId = selectedDashboard?.id;

 	return (
 		<div>
--- a/frontend/src/providers/Dashboard/helpers/selectedRowWidgetIdHelper.ts
+++ b/frontend/src/providers/Dashboard/helpers/selectedRowWidgetIdHelper.ts
@@ -0,0 +1,28 @@
+const PREFIX = 'dashboard_row_widget_';
+
+function getKey(dashboardId: string): string {
+	return `${PREFIX}${dashboardId}`;
+}
+
+export function setSelectedRowWidgetId(
+	dashboardId: string,
+	widgetId: string,
+): void {
+	const key = getKey(dashboardId);
+
+	// remove all other selected widget ids for the dashboard before setting the new one
+	// to ensure only one widget is selected at a time. Helps out in weird navigate and refresh scenarios
+	Object.keys(sessionStorage)
+		.filter((k) => k.startsWith(PREFIX) && k !== key)
+		.forEach((k) => sessionStorage.removeItem(k));
+
+	sessionStorage.setItem(key, widgetId);
+}
+
+export function getSelectedRowWidgetId(dashboardId: string): string | null {
+	return sessionStorage.getItem(getKey(dashboardId));
+}
+
+export function clearSelectedRowWidgetId(dashboardId: string): void {
+	sessionStorage.removeItem(getKey(dashboardId));
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Vinícius Lourenço	f054121477	feat(pnpm): migrate away from yarn	2026-03-11 23:52:34 -03:00
Naman Verma	61df12d126	test: integration tests for percentile aggregation (#10555 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * fix: make histogramQuantile function work for devenv setup * fix: make histogramQuantile function work for integration tests * test: histogram percentile integration tests * chore: explicitly mention user_scripts_path * chore: fail tests if download of UDF fails	2026-03-11 14:27:01 +00:00
Vinicius Lourenço	b846faa1fa	fix(app-routes): do not render old route, redirect instead (#10553 )	2026-03-11 12:53:32 +00:00
Ishan	557451ed81	feat: Option to zoom out OR reset zoom in the explorer pages (#10464 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * feat: zoom out func ladder added * feat: zoom out feature with testcases * fix: comments resolved moved to signoz btn added testcase for querydelete * feat: updated btn compoent to use prefix icon * feat: historical enddate preset as null to preserve custom * fix: cursor bot callback and localstorage * feat: common util for local storage * feat: rename and testcase * feat: avoid persist for non preset	2026-03-11 07:23:30 +00:00
Ishan	25c513ec2f	fix: updated fallback color (#10525 ) * fix: updated fallback color * fix: updated testcase	2026-03-11 07:23:21 +00:00
primus-bot[bot]	ae71f2608a	chore(release): bump to v0.115.0 (#10556 ) Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>	2026-03-11 07:11:28 +00:00
Ishan	f7140832d0	Fix - Handling for resource. prefix in quick filters (#10497 ) * fix: resource added in checkbox * fix: resource name handling * fix: added testcases * fix: updated for other types as well * fix: updated testcases * fix: pr comments	2026-03-11 06:31:53 +00:00
Yunus M	8c5ff10b42	feat: update url with y-axis unit (#10530 ) * feat: update url with y-axis unit * feat: implement useUrlYAxisUnit hook for y-axis unit management * feat: use nuqs for handling query param updates * chore: whitelist nuqs in jest * chore: add nuqs to test utils	2026-03-11 05:10:47 +00:00
Vishal Sharma	12c0df8410	feat(onboarding): add configs and SVGs for 9 new datasources (#10552 ) * chore: add new integration logos and update onboarding configurations and related files * fix(logos): add viewBox attribute to huggingface svg for proper scaling	2026-03-11 04:58:18 +00:00
Ashwin Bhatkal	a139915f4e	fix: guard against undefined spread in useGetQueryLabels (#10550 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * fix: guard against undefined spread in useGetQueryLabels * chore: add tests	2026-03-10 18:30:31 +00:00
Abhi kumar	b69bcd63ba	fix: added fix for apiresponse being undefined in panel config creation (#10549 ) * fix: added fix for apiresponse being undefined in panel config creation * chore: pr review changes	2026-03-10 17:35:34 +00:00
Ashwin Bhatkal	f576a86dd1	fix: avoid read-only variables mutation (#10548 )	2026-03-10 17:22:47 +00:00
Ashwin Bhatkal	996c9a891f	chore: remove selectedRowWidgetId from provider (#10547 ) * chore: remove selectedRowWidgetId from provider * chore: rename helper * chore: add comment	2026-03-10 16:57:38 +00:00
Ashwin Bhatkal	d1a872dadc	chore: remove dashboardId from provider (#10546 )	2026-03-10 16:42:25 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>