feat(pnpm): migrate from yarn

* chore(frontend): separate out columnWidths from ResizeTable

* chore: fix tests

.github/workflows/commitci.yaml

@@ -7,10 +7,14 @@ on:
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   refcheck:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

.github/workflows/goci.yaml

@@ -7,10 +7,14 @@ on:
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   test:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-test.yaml@main
@@ -21,6 +25,7 @@ jobs:
       GO_VERSION: 1.24
   fmt:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-fmt.yaml@main
@@ -30,6 +35,7 @@ jobs:
       GO_VERSION: 1.24
   lint:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-lint.yaml@main
@@ -39,6 +45,7 @@ jobs:
       GO_VERSION: 1.24
   deps:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-deps.yaml@main
@@ -48,6 +55,7 @@ jobs:
       GO_VERSION: 1.24
   build:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -79,6 +87,7 @@ jobs:
           make docker-build-enterprise
   openapi:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

.github/workflows/jsci.yaml

@@ -7,10 +7,14 @@ on:
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   tsc:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -27,6 +31,7 @@ jobs:
         run: cd frontend && yarn tsc
   tsc2:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-tsc.yaml@main
@@ -36,6 +41,7 @@ jobs:
       JS_SRC: frontend
   test:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-test.yaml@main
@@ -45,6 +51,7 @@ jobs:
       JS_SRC: frontend
   fmt:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-fmt.yaml@main
@@ -54,6 +61,7 @@ jobs:
       JS_SRC: frontend
   lint:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-lint.yaml@main
@@ -61,8 +69,53 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+  lint-pnpm:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: setup node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+      - name: install
+        run: cd frontend && pnpm install
+      - name: lint
+        run: echo 'done'
+  lint-pnpm-cache:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: setup node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - name: install
+        run: cd frontend && pnpm install
+      - name: lint
+        run: echo 'done'
   md-languages:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -73,6 +126,7 @@ jobs:
         run: bash frontend/scripts/validate-md-languages.sh
   authz:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

frontend/package.json

@@ -37,10 +37,10 @@
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@grafana/data": "^11.2.3",
+    "@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",
@@ -54,7 +54,7 @@
     "@signozhq/combobox": "0.0.2",
     "@signozhq/command": "0.0.0",
     "@signozhq/design-tokens": "2.1.1",
-    "@signozhq/dialog": "^0.0.2",
+    "@signozhq/dialog": "0.0.2",
     "@signozhq/icons": "0.1.0",
     "@signozhq/input": "0.0.2",
     "@signozhq/popover": "0.0.0",
@@ -63,7 +63,7 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "^0.0.1",
+    "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",
@@ -76,28 +76,28 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@vitejs/plugin-react": "5.1.4",
-    "@xstate/react": "^3.0.0",
+    "@xstate/react": "3.0.0",
     "ansi-to-html": "0.7.2",
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
     "antlr4": "4.13.2",
     "axios": "1.12.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.6.4",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "29.6.4",
     "babel-loader": "9.1.3",
-    "babel-plugin-named-asset-import": "^0.3.7",
-    "babel-preset-minify": "^0.5.1",
-    "babel-preset-react-app": "^10.0.1",
+    "babel-plugin-named-asset-import": "0.3.7",
+    "babel-preset-minify": "0.5.1",
+    "babel-preset-react-app": "10.0.1",
     "chart.js": "3.9.1",
-    "chartjs-adapter-date-fns": "^2.0.0",
-    "chartjs-plugin-annotation": "^1.4.0",
+    "chartjs-adapter-date-fns": "2.0.0",
+    "chartjs-plugin-annotation": "1.4.0",
     "classnames": "2.3.2",
-    "color": "^4.2.1",
+    "color": "4.2.1",
     "color-alpha": "2.0.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "7.0.3",
     "crypto-js": "4.2.0",
     "d3-hierarchy": "3.1.2",
-    "dayjs": "^1.10.7",
+    "dayjs": "1.10.7",
     "dompurify": "3.2.4",
     "dotenv": "8.2.0",
     "event-source-polyfill": "1.0.31",
@@ -106,19 +106,19 @@
     "history": "4.10.1",
     "http-proxy-middleware": "3.0.5",
     "http-status-codes": "2.3.0",
-    "i18next": "^21.6.12",
-    "i18next-browser-languagedetector": "^6.1.3",
-    "i18next-http-backend": "^1.3.2",
+    "i18next": "21.6.12",
+    "i18next-browser-languagedetector": "6.1.3",
+    "i18next-http-backend": "1.3.2",
     "immer": "11.1.3",
     "jest": "30.2.0",
-    "js-base64": "^3.7.2",
-    "lodash-es": "^4.17.21",
+    "js-base64": "3.7.2",
+    "lodash-es": "4.17.21",
     "lucide-react": "0.498.0",
     "mini-css-extract-plugin": "2.4.5",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
-    "overlayscrollbars": "^2.8.1",
-    "overlayscrollbars-react": "^0.5.6",
+    "overlayscrollbars": "2.8.1",
+    "overlayscrollbars-react": "0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
     "rc-tween-one": "3.0.6",
@@ -130,36 +130,36 @@
     "react-dom": "18.2.0",
     "react-drag-listview": "2.0.0",
     "react-error-boundary": "4.0.11",
-    "react-force-graph-2d": "^1.29.1",
+    "react-force-graph-2d": "1.29.1",
     "react-full-screen": "1.1.1",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "1.3.4",
     "react-helmet-async": "1.3.0",
-    "react-i18next": "^11.16.1",
+    "react-i18next": "11.16.1",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
-    "react-redux": "^7.2.2",
-    "react-router-dom": "^5.2.0",
+    "react-redux": "7.2.2",
+    "react-router-dom": "5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",
-    "react-use": "^17.3.2",
+    "react-use": "17.3.2",
     "react-virtuoso": "4.0.3",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
+    "redux": "4.0.5",
+    "redux-thunk": "2.3.0",
     "rehype-raw": "7.0.0",
     "rollup-plugin-visualizer": "7.0.0",
     "rrule": "2.8.1",
-    "stream": "^0.0.2",
-    "styled-components": "^5.3.11",
-    "timestamp-nano": "^1.0.0",
-    "ts-node": "^10.2.1",
+    "stream": "0.0.2",
+    "styled-components": "5.3.11",
+    "timestamp-nano": "1.0.0",
+    "ts-node": "10.2.1",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
-    "uuid": "^8.3.2",
+    "uuid": "8.3.2",
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-html": "3.2.2",
-    "web-vitals": "^0.2.4",
-    "xstate": "^4.31.0",
+    "web-vitals": "0.2.4",
+    "xstate": "4.31.0",
     "zustand": "5.0.11"
   },
   "browserslist": {
@@ -175,69 +175,70 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-jsx": "^7.12.13",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.21.4",
-    "@commitlint/cli": "^20.4.2",
-    "@commitlint/config-conventional": "^20.4.2",
+    "@babel/core": "7.22.11",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-syntax-jsx": "7.12.13",
+    "@babel/preset-env": "7.22.14",
+    "@babel/preset-react": "7.12.13",
+    "@babel/preset-typescript": "7.21.4",
+    "@commitlint/cli": "20.4.2",
+    "@commitlint/config-conventional": "20.4.2",
     "@faker-js/faker": "9.3.0",
     "@jest/globals": "30.2.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/color": "3.0.3",
     "@types/crypto-js": "4.2.2",
-    "@types/dompurify": "^2.4.0",
-    "@types/event-source-polyfill": "^1.0.0",
+    "@types/dompurify": "2.4.0",
+    "@types/event-source-polyfill": "1.0.0",
     "@types/fontfaceobserver": "2.1.0",
     "@types/jest": "30.0.0",
-    "@types/lodash-es": "^4.17.4",
-    "@types/mini-css-extract-plugin": "^2.5.1",
-    "@types/node": "^16.10.3",
+    "@types/lodash-es": "4.17.4",
+    "@types/mini-css-extract-plugin": "2.5.1",
+    "@types/node": "16.10.3",
     "@types/papaparse": "5.3.7",
     "@types/react": "18.0.26",
     "@types/react-addons-update": "0.14.21",
     "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-dom": "18.0.10",
-    "@types/react-grid-layout": "^1.1.2",
+    "@types/react-grid-layout": "1.1.2",
     "@types/react-helmet-async": "1.0.3",
     "@types/react-lottie": "1.2.10",
-    "@types/react-redux": "^7.1.11",
+    "@types/react-redux": "7.1.11",
     "@types/react-resizable": "3.0.3",
-    "@types/react-router-dom": "^5.1.6",
+    "@types/react-router-dom": "5.1.6",
     "@types/react-syntax-highlighter": "15.5.13",
     "@types/redux-mock-store": "1.0.4",
-    "@types/styled-components": "^5.1.4",
-    "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@types/styled-components": "5.1.4",
+    "@types/uuid": "8.3.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
     "autoprefixer": "10.4.19",
-    "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^29.15.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-sonarjs": "^0.12.0",
-    "husky": "^7.0.4",
-    "imagemin": "^8.0.1",
-    "imagemin-svgo": "^10.0.1",
-    "is-ci": "^3.0.1",
+    "babel-plugin-styled-components": "1.12.0",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jest": "29.15.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.24.0",
+    "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",
+    "is-ci": "3.0.1",
     "jest-environment-jsdom": "29.7.0",
     "jest-environment-node": "29.7.0",
-    "jest-styled-components": "^7.2.0",
-    "lint-staged": "^12.5.0",
+    "jest-styled-components": "7.2.0",
+    "lint-staged": "12.5.0",
     "msw": "1.3.2",
     "npm-run-all": "latest",
     "orval": "7.18.0",
-    "portfinder-sync": "^0.0.2",
+    "portfinder-sync": "0.0.2",
     "postcss": "8.5.6",
     "prettier": "2.2.1",
     "prop-types": "15.8.1",
@@ -249,7 +250,7 @@
     "svgo": "4.0.0",
     "ts-api-utils": "2.4.0",
     "ts-jest": "29.4.6",
-    "ts-node": "^10.2.1",
+    "ts-node": "10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
@@ -268,18 +269,40 @@
     "debug": "4.3.4",
     "semver": "7.5.4",
     "xml2js": "0.5.0",
-    "phin": "^3.7.1",
+    "phin": "3.7.1",
     "body-parser": "1.20.3",
     "http-proxy-middleware": "3.0.5",
     "cross-spawn": "7.0.5",
-    "cookie": "^0.7.1",
+    "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",
+    "brace-expansion": "2.0.2",
+    "on-headers": "1.1.0",
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
+  },
+  "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"
+    }
   }
 }

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -14,8 +14,6 @@ import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
 import { debounce, set } from 'lodash-es';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { Widgets } from 'types/api/dashboard/getAll';
 
 import ResizableHeader from './ResizableHeader';
 import { DragSpanStyle } from './styles';
@@ -26,31 +24,26 @@ function ResizeTable({
 	columns,
 	onDragColumn,
 	pagination,
-	widgetId,
-	shouldPersistColumnWidths = false,
+	columnWidths,
+	onColumnWidthsChange,
 	...restProps
 }: ResizeTableProps): JSX.Element {
 	const [columnsData, setColumns] = useState<ColumnsType>([]);
-	const { setColumnWidths, selectedDashboard } = useDashboard();
-
-	const columnWidths = shouldPersistColumnWidths
-		? (selectedDashboard?.data?.widgets?.find(
-				(widget) => widget.id === widgetId,
-		  ) as Widgets)?.columnWidths
-		: undefined;
+	const onColumnWidthsChangeRef = useRef(onColumnWidthsChange);
 
 	const updateAllColumnWidths = useRef(
 		debounce((widthsConfig: Record<string, number>) => {
-			if (!widgetId || !shouldPersistColumnWidths) {
+			if (!onColumnWidthsChangeRef.current) {
 				return;
 			}
-			setColumnWidths?.((prev) => ({
-				...prev,
-				[widgetId]: widthsConfig,
-			}));
+			onColumnWidthsChangeRef.current(widthsConfig);
 		}, 1000),
 	).current;
 
+	useEffect(() => {
+		onColumnWidthsChangeRef.current = onColumnWidthsChange;
+	}, [onColumnWidthsChange]);
+
 	const handleResize = useCallback(
 		(index: number) => (
 			e: SyntheticEvent<Element>,
@@ -75,7 +68,7 @@ function ResizeTable({
 				...col,
 				...(onDragColumn && {
 					title: (
-						<DragSpanStyle className="dragHandler">
+						<DragSpanStyle className="dragHandler" data-testid="drag-column-title">
 							{col?.title?.toString() || ''}
 						</DragSpanStyle>
 					),
@@ -106,31 +99,31 @@ function ResizeTable({
 	}, [mergedColumns, pagination, restProps]);
 
 	useEffect(() => {
-		if (columns) {
-			// Apply stored column widths from widget configuration
-			const columnsWithStoredWidths = columns.map((col) => {
-				const dataIndex = (col as RowData).dataIndex as string;
-				if (dataIndex && columnWidths) {
-					const width = getColumnWidth(dataIndex, columnWidths);
-					if (width) {
-						return {
-							...col,
-							width, // Apply stored width
-						};
-					}
-				}
-				return col;
-			});
-
-			setColumns(columnsWithStoredWidths);
-		}
-	}, [columns, columnWidths]);
-
-	useEffect(() => {
-		if (!shouldPersistColumnWidths) {
+		if (!columns) {
 			return;
 		}
-		// Collect all column widths in a single object
+
+		const columnsWithStoredWidths = columns.map((col) => {
+			const dataIndex = (col as RowData).dataIndex as string;
+			if (dataIndex && columnWidths) {
+				const width = getColumnWidth(dataIndex, columnWidths);
+				if (width) {
+					return { ...col, width };
+				}
+			}
+			return col;
+		});
+
+		setColumns(columnsWithStoredWidths);
+	}, [columns, columnWidths]);
+
+	const lastReportedWidthsRef = useRef<Record<string, number>>({});
+
+	useEffect(() => {
+		if (!onColumnWidthsChange) {
+			return;
+		}
+
 		const newColumnWidths: Record<string, number> = {};
 
 		mergedColumns.forEach((col) => {
@@ -140,11 +133,20 @@ function ResizeTable({
 			}
 		});
 
-		// Only update if there are actual widths to set
-		if (Object.keys(newColumnWidths).length > 0) {
+		if (Object.keys(newColumnWidths).length === 0) {
+			return;
+		}
+
+		const last = lastReportedWidthsRef.current;
+		const hasChange =
+			Object.keys(newColumnWidths).length !== Object.keys(last).length ||
+			Object.keys(newColumnWidths).some((k) => newColumnWidths[k] !== last[k]);
+
+		if (hasChange) {
+			lastReportedWidthsRef.current = newColumnWidths;
 			updateAllColumnWidths(newColumnWidths);
 		}
-	}, [mergedColumns, updateAllColumnWidths, shouldPersistColumnWidths]);
+	}, [mergedColumns, updateAllColumnWidths, onColumnWidthsChange]);
 
 	return onDragColumn ? (
 		<ReactDragListView.DragColumn {...dragColumnParams} onDragEnd={onDragColumn}>

frontend/src/components/ResizeTable/__tests__/ResizeTable.test.tsx

@@ -0,0 +1,244 @@
+import { act } from '@testing-library/react';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import ResizeTable from '../ResizeTable';
+
+jest.mock('react-resizable', () => ({
+	Resizable: ({
+		children,
+		onResize,
+		width,
+	}: {
+		children: React.ReactNode;
+		onResize: (
+			e: React.SyntheticEvent,
+			data: { size: { width: number } },
+		) => void;
+		width: number;
+	}): JSX.Element => (
+		<div>
+			{children}
+			<button
+				data-testid="resize-trigger"
+				type="button"
+				onClick={(e): void => onResize(e, { size: { width: width + 50 } })}
+			/>
+		</div>
+	),
+}));
+
+// Make debounce synchronous so onColumnWidthsChange fires immediately
+jest.mock('lodash-es', () => ({
+	...jest.requireActual('lodash-es'),
+	debounce: (fn: (...args: any[]) => any): ((...args: any[]) => any) => fn,
+}));
+
+const baseColumns = [
+	{ dataIndex: 'name', title: 'Name', width: 100 },
+	{ dataIndex: 'value', title: 'Value', width: 100 },
+];
+
+const baseDataSource = [
+	{ key: '1', name: 'Alice', value: 42 },
+	{ key: '2', name: 'Bob', value: 99 },
+];
+
+describe('ResizeTable', () => {
+	it('renders column headers and data rows', () => {
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+			/>,
+		);
+
+		expect(screen.getByText('Name')).toBeInTheDocument();
+		expect(screen.getByText('Value')).toBeInTheDocument();
+		expect(screen.getByText('Alice')).toBeInTheDocument();
+		expect(screen.getByText('Bob')).toBeInTheDocument();
+	});
+
+	it('overrides column widths from columnWidths prop and reports them via onColumnWidthsChange', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					columnWidths={{ name: 250, value: 180 }}
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 250, value: 180 }),
+		);
+	});
+
+	it('reports original column widths via onColumnWidthsChange when columnWidths prop is not provided', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 100, value: 100 }),
+		);
+	});
+
+	it('does not call onColumnWidthsChange when it is not provided', () => {
+		// Should render without errors and without attempting to call an undefined callback
+		expect(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+				/>,
+			);
+		}).not.toThrow();
+	});
+
+	it('only overrides the column that has a stored width, leaving others at their original width', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					columnWidths={{ name: 250 }}
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 250, value: 100 }),
+		);
+	});
+
+	it('does not call onColumnWidthsChange on re-render when widths have not changed', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		const { rerender } = render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledTimes(1);
+		onColumnWidthsChange.mockClear();
+
+		rerender(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).not.toHaveBeenCalled();
+	});
+
+	it('does not call onColumnWidthsChange when no column has a defined width', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={[
+					{ dataIndex: 'name', title: 'Name' },
+					{ dataIndex: 'value', title: 'Value' },
+				]}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).not.toHaveBeenCalled();
+	});
+
+	it('calls onColumnWidthsChange with the new width after a column is resized', async () => {
+		const user = userEvent.setup();
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		onColumnWidthsChange.mockClear();
+
+		// Click the first column's resize trigger — mock adds 50px to the current width (100 → 150)
+		const [firstResizeTrigger] = screen.getAllByTestId('resize-trigger');
+		await user.click(firstResizeTrigger);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 150, value: 100 }),
+		);
+	});
+
+	it('does not affect other columns when only one column is resized', async () => {
+		const user = userEvent.setup();
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		onColumnWidthsChange.mockClear();
+
+		// Resize only the second column (value: 100 → 150), name should stay at 100
+		const resizeTriggers = screen.getAllByTestId('resize-trigger');
+		await user.click(resizeTriggers[1]);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 100, value: 150 }),
+		);
+	});
+
+	it('wraps column titles in drag handler spans when onDragColumn is provided', () => {
+		const onDragColumn = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onDragColumn={onDragColumn}
+			/>,
+		);
+
+		const dragTitles = screen.getAllByTestId('drag-column-title');
+		expect(dragTitles).toHaveLength(baseColumns.length);
+		expect(dragTitles[0]).toHaveTextContent('Name');
+		expect(dragTitles[1]).toHaveTextContent('Value');
+	});
+});

frontend/src/components/ResizeTable/types.ts

@@ -6,10 +6,25 @@ import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatS
 
 import { TableDataSource } from './contants';
 
+type ColumnWidths = Record<string, number>;
+
 export interface ResizeTableProps extends TableProps<any> {
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
-	widgetId?: string;
-	shouldPersistColumnWidths?: boolean;
+	/**
+	 * Pre-resolved column widths for this table, keyed by column dataIndex.
+	 * Use this to apply persisted widths on mount (e.g. from widget.columnWidths).
+	 * Do NOT pass a value that updates reactively on every resize — that creates a
+	 * feedback loop. Pass only stable / persisted values.
+	 */
+	columnWidths?: ColumnWidths;
+	/**
+	 * Called (debounced) whenever the user finishes resizing a column.
+	 * The widths object contains all current column widths keyed by dataIndex.
+	 * Intended for persisting widths to an external store (e.g. dashboard context
+	 * staging buffer). The caller owns the storage; ResizeTable does not read back
+	 * whatever is written here.
+	 */
+	onColumnWidthsChange?: (widths: ColumnWidths) => void;
 }
 export interface DynamicColumnTableProps extends TableProps<any> {
 	tablesource: typeof TableDataSource[keyof typeof TableDataSource];

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

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

frontend/src/components/TimelineV3/TimelineV3.tsx

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

frontend/src/components/TimelineV3/utils.ts

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

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

@@ -81,7 +81,18 @@ function FullView({
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
-	const { selectedDashboard, isDashboardLocked } = useDashboard();
+	const {
+		selectedDashboard,
+		isDashboardLocked,
+		setColumnWidths,
+	} = useDashboard();
+
+	const onColumnWidthsChange = useCallback(
+		(widths: Record<string, number>) => {
+			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
+		},
+		[setColumnWidths, widget.id],
+	);
 	const { dashboardVariables } = useDashboardVariables();
 	const { user } = useAppContext();
 
@@ -381,6 +392,7 @@ function FullView({
 								onClickHandler={onClickHandler}
 								enableDrillDown={enableDrillDown}
 								selectedGraph={selectedPanelType}
+								onColumnWidthsChange={onColumnWidthsChange}
 							/>
 						</GraphContainer>
 					</div>

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -168,6 +168,9 @@ jest.mock('providers/Dashboard/Dashboard', () => ({
 				variables: [],
 			},
 		},
+		setLayouts: jest.fn(),
+		setSelectedDashboard: jest.fn(),
+		setColumnWidths: jest.fn(),
 	}),
 }));
 

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

@@ -101,7 +101,19 @@ function WidgetGraphComponent({
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 
-	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
+	const {
+		setLayouts,
+		selectedDashboard,
+		setSelectedDashboard,
+		setColumnWidths,
+	} = useDashboard();
+
+	const onColumnWidthsChange = useCallback(
+		(widths: Record<string, number>) => {
+			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
+		},
+		[setColumnWidths, widget.id],
+	);
 
 	const onToggleModal = useCallback(
 		(func: Dispatch<SetStateAction<boolean>>) => {
@@ -424,6 +436,7 @@ function WidgetGraphComponent({
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
 						enableDrillDown={enableDrillDown}
+						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</div>
 			)}

frontend/src/container/GridTableComponent/index.tsx

@@ -45,6 +45,8 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
+	columnWidths,
+	onColumnWidthsChange,
 	panelType,
 	queryRangeRequest,
 	decimalPrecision,
@@ -284,6 +286,8 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
+				columnWidths={columnWidths}
+				onColumnWidthsChange={onColumnWidthsChange}
 				panelType={panelType}
 				queryRangeRequest={queryRangeRequest}
 				onRow={

frontend/src/container/GridTableComponent/types.ts

@@ -24,6 +24,8 @@ export type GridTableComponentProps = {
 	onOpenTraceBtnClick?: (record: RowData) => void;
 	customOnRowClick?: (record: RowData) => void;
 	widgetId?: string;
+	columnWidths?: Record<string, number>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
 	customColTitles?: Record<string, string>;
 	enableDrillDown?: boolean;

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -33,6 +33,7 @@ function LogsPanelComponent({
 	widget,
 	setRequestData,
 	queryResponse,
+	onColumnWidthsChange,
 }: LogsPanelComponentProps): JSX.Element {
 	const [pageSize, setPageSize] = useState<number>(10);
 	const [offset, setOffset] = useState<number>(0);
@@ -145,8 +146,8 @@ function LogsPanelComponent({
 							columns={columns}
 							onRow={handleRow}
 							rowKey={(record): string => record.id}
-							widgetId={widget.id}
-							shouldPersistColumnWidths
+							columnWidths={widget.columnWidths}
+							onColumnWidthsChange={onColumnWidthsChange}
 						/>
 					</OverlayScrollbar>
 				</div>
@@ -189,6 +190,7 @@ export type LogsPanelComponentProps = {
 		Error
 	>;
 	widget: Widgets;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default LogsPanelComponent;

frontend/src/container/PanelWrapper/ListPanelWrapper.tsx

@@ -8,6 +8,7 @@ function ListPanelWrapper({
 	widget,
 	queryResponse,
 	setRequestData,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const dataSource = widget.query.builder?.queryData[0]?.dataSource;
 
@@ -21,6 +22,7 @@ function ListPanelWrapper({
 				widget={widget}
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
+				onColumnWidthsChange={onColumnWidthsChange}
 			/>
 		);
 	}
@@ -29,6 +31,7 @@ function ListPanelWrapper({
 			widget={widget}
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
+			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -24,6 +24,7 @@ function PanelWrapper({
 	customOnRowClick,
 	panelMode,
 	enableDrillDown = false,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -58,6 +59,7 @@ function PanelWrapper({
 			customOnRowClick={customOnRowClick}
 			customSeries={customSeries}
 			enableDrillDown={enableDrillDown}
+			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -14,6 +14,7 @@ function TablePanelWrapper({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	enableDrillDown = false,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const panelData =
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
@@ -34,6 +35,8 @@ function TablePanelWrapper({
 			onOpenTraceBtnClick={onOpenTraceBtnClick}
 			customOnRowClick={customOnRowClick}
 			widgetId={widget.id}
+			columnWidths={widget.columnWidths}
+			onColumnWidthsChange={onColumnWidthsChange}
 			renderColumnCell={widget.renderColumnCell}
 			customColTitles={widget.customColTitles}
 			contextLinks={widget.contextLinks}

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -29,6 +29,7 @@ export type PanelWrapperProps = {
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	enableDrillDown?: boolean;
 	panelMode: PanelMode;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export type TooltipData = {

frontend/src/container/QueryTable/QueryTable.intefaces.ts

@@ -24,6 +24,8 @@ export type QueryTableProps = Omit<
 	sticky?: TableProps<RowData>['sticky'];
 	searchTerm?: string;
 	widgetId?: string;
+	columnWidths?: Record<string, number>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	enableDrillDown?: boolean;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;

frontend/src/container/QueryTable/QueryTable.tsx

@@ -28,6 +28,8 @@ export function QueryTable({
 	sticky,
 	searchTerm,
 	widgetId,
+	columnWidths,
+	onColumnWidthsChange,
 	panelType,
 	...props
 }: QueryTableProps): JSX.Element {
@@ -175,8 +177,8 @@ export function QueryTable({
 					dataSource={filterTable === null ? newDataSource : filterTable}
 					scroll={{ x: 'max-content' }}
 					pagination={paginationConfig}
-					widgetId={widgetId}
-					shouldPersistColumnWidths
+					columnWidths={columnWidths}
+					onColumnWidthsChange={onColumnWidthsChange}
 					sticky={sticky}
 					{...props}
 				/>

frontend/src/container/TracesTableComponent/TracesTableComponent.tsx

@@ -35,6 +35,7 @@ function TracesTableComponent({
 	widget,
 	queryResponse,
 	setRequestData,
+	onColumnWidthsChange,
 }: TracesTableComponentProps): JSX.Element {
 	const [pagination, setPagination] = useState<Pagination>({
 		offset: 0,
@@ -131,8 +132,8 @@ function TracesTableComponent({
 						columns={columns}
 						onRow={handleRow}
 						sticky
-						widgetId={widget.id}
-						shouldPersistColumnWidths
+						columnWidths={widget.columnWidths}
+						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</OverlayScrollbar>
 			</div>
@@ -175,6 +176,7 @@ export type TracesTableComponentProps = {
 	>;
 	widget: Widgets;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default TracesTableComponent;

frontend/src/pages/TraceDetailV2/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,57 +0,0 @@
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-} from '@signozhq/resizable';
-import useGetTraceV2 from 'hooks/trace/useGetTraceV2';
-import { Span, TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
-
-import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
-import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
-
-function TraceDetailsV3(): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailV2URLProps>();
-	const [selectedSpan, _setSelectedSpan] = useState<Span>();
-	const [uncollapsedNodes] = useState<string[]>([]);
-
-	const { data: traceData } = useGetTraceV2({
-		traceId,
-		uncollapsedSpans: uncollapsedNodes,
-		selectedSpanId: '',
-		isSelectedSpanIDUnCollapsed: false,
-	});
-
-	return (
-		<div
-			style={{
-				height: 'calc(100vh - 90px)',
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			<TraceDetailsHeader />
-			<ResizablePanelGroup
-				direction="vertical"
-				autoSaveId="trace-details-v3-layout"
-				style={{ flex: 1 }}
-			>
-				<ResizablePanel defaultSize={40} minSize={20} maxSize={80}>
-					<TraceFlamegraph
-						serviceExecTime={traceData?.payload?.serviceNameToTotalDurationMap || {}}
-						startTime={traceData?.payload?.startTimestampMillis || 0}
-						endTime={traceData?.payload?.endTimestampMillis || 0}
-						selectedSpan={selectedSpan}
-					/>
-				</ResizablePanel>
-				<ResizableHandle withHandle />
-				<ResizablePanel defaultSize={60} minSize={20}>
-					<div />
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-export default TraceDetailsV3;