Fix: Handle unrecognized child type in VisitPrimary and remove no-op boolean expressions

docs/contributing/development.md

@@ -100,7 +100,7 @@ This command:
 
 3. Create a `.env` file in this directory:
    ```env
-   VITE_FRONTEND_API_ENDPOINT=http://localhost:8080
+   FRONTEND_API_ENDPOINT=http://localhost:8080
    ```
 
 4. Start the development server:

docs/contributing/onboarding.md

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

frontend/example.env

@@ -1,6 +1,6 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
 VITE_PYLON_APP_ID="pylon-app-id"
 VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"

frontend/jest.config.ts

@@ -39,7 +39,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/public/Logos/deno.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>

frontend/public/Logos/haystack.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>

frontend/public/Logos/huggingface.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" fill="none"><path fill="#ffd21e" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5"/><path fill="#ff9d0b" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0m-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0"/><path fill="#3a3b45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32Zm-23.55 0c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#ff323d" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3a3b45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.6 8.6 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97" clip-rule="evenodd"/><path fill="#ff9d0b" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-46.5 0a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-6.69 11c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7 7 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.3 44.3 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48m0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85"/><path fill="#ffd21e" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9-3.24 5.08.68 8.01c3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12"/><path fill="#ff9d0b" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7 7 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.3 44.3 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48m0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.5 1.5 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85"/><path fill="#ffd21e" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44-1.58 4.17-6.8 7.33c-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12"/></svg>

frontend/public/Logos/nvidia-dcgm.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#76b900" viewBox="0 0 24 24"><title>NVIDIA</title><path d="M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936"/></svg>

frontend/public/Logos/ollama.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>

frontend/public/Logos/openrouter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>

frontend/public/Logos/prometheus.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.94 -1.44 438.62 432.87"><path fill="#e75225" d="M215.926 7.068c115.684.024 210.638 93.784 210.493 207.844-.148 115.793-94.713 208.252-212.912 208.169C97.95 423 4.52 329.143 4.601 213.221 4.68 99.867 99.833 7.044 215.926 7.068m-63.947 73.001c2.652 12.978.076 25.082-3.846 36.988-2.716 8.244-6.47 16.183-8.711 24.539-3.694 13.769-7.885 27.619-9.422 41.701-2.21 20.25 5.795 38.086 19.493 55.822L86.527 225.94c.11 1.978-.007 2.727.21 3.361 5.968 17.43 16.471 32.115 28.243 45.957 1.246 1.465 4.082 2.217 6.182 2.221 62.782.115 125.565.109 188.347.028 1.948-.003 4.546-.369 5.741-1.618 13.456-14.063 23.746-30.079 30.179-50.257l-66.658 12.976c4.397-8.567 9.417-16.1 12.302-24.377 9.869-28.315 5.779-55.69-8.387-81.509-11.368-20.72-21.854-41.349-16.183-66.32-12.005 11.786-16.615 26.79-19.541 42.253-2.882 15.23-4.58 30.684-6.811 46.136-.317-.467-.728-.811-.792-1.212-.258-1.621-.499-3.255-.587-4.893-1.355-25.31-6.328-49.696-16.823-72.987-6.178-13.71-12.99-27.727-6.622-44.081-4.31 2.259-8.205 4.505-10.997 7.711-8.333 9.569-11.779 21.062-12.666 33.645-.757 10.75-1.796 21.552-3.801 32.123-2.107 11.109-5.448 21.998-12.956 32.209-3.033-21.81-3.37-43.38-22.928-57.237m161.877 216.523H116.942v34.007h196.914zm-157.871 51.575c-.163 28.317 28.851 49.414 64.709 47.883 29.716-1.269 56.016-24.51 53.755-47.883z"/></svg>

frontend/public/Logos/statsd.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.88 103.53"><path d="M5.47 0H117.4c3.01 0 5.47 2.46 5.47 5.47v92.58c0 3.01-2.46 5.47-5.47 5.47H5.47c-3.01 0-5.47-2.46-5.47-5.47V5.47C0 2.46 2.46 0 5.47 0m26.37 38.55 17.79 18.42 2.14 2.13-2.12 2.16-17.97 19.05-5.07-5 15.85-16.15L26.81 43.6zM94.1 79.41H54.69v-6.84H94.1zM38.19 9.83c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78S35 9.83 38.19 9.83m-19.24 0c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78 2.58-5.78 5.78-5.78M7.49 5.41H115.4c1.15 0 2.09.94 2.09 2.09v18.32H5.4V7.5c0-1.15.94-2.09 2.09-2.09" style="fill-rule:evenodd;clip-rule:evenodd;fill:#1668dc"/></svg>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx

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

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -18,7 +18,7 @@ import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues'
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -26,7 +26,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import { isKeyMatch } from './utils';
 
 import './Checkbox.styles.scss';
 
@@ -85,7 +84,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			currentQuery.builder.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.some((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
+				isEqual(item.key?.key, filter.attributeKey.key),
 			),
 		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
 	);
@@ -190,7 +189,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
 		]?.filters?.items.find((item) =>
-			isKeyMatch(item.key?.key, filter.attributeKey.key),
+			isEqual(item.key?.key, filter.attributeKey.key),
 		);
 
 		if (filterSync) {
@@ -237,7 +236,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			(currentQuery?.builder?.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.filter((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
+				isEqual(item.key?.key, filter.attributeKey.key),
 			)?.length || 0) > 1,
 
 		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
@@ -281,7 +280,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 						items:
 							idx === activeQueryIndex
 								? item.filters?.items?.filter(
-										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+										(fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
 								  ) || []
 								: [...(item.filters?.items || [])],
 						op: item.filters?.op || 'AND',
@@ -314,7 +313,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					: 'Only'
 				: 'Only';
 			query.filters.items = query.filters.items.filter(
-				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
+				(q) => !isEqual(q.key?.key, filter.attributeKey.key),
 			);
 
 			if (query.filter?.expression) {
@@ -336,13 +335,13 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		} else if (query?.filters?.items) {
 			if (
 				query.filters?.items?.some((item) =>
-					isKeyMatch(item.key?.key, filter.attributeKey.key),
+					isEqual(item.key?.key, filter.attributeKey.key),
 				)
 			) {
 				// if there is already a running filter for the current attribute key then
 				// we split the cases by which particular operator is present right now!
 				const currentFilter = query.filters?.items?.find((q) =>
-					isKeyMatch(q.key?.key, filter.attributeKey.key),
+					isEqual(q.key?.key, filter.attributeKey.key),
 				);
 				if (currentFilter) {
 					const runningOperator = currentFilter?.op;
@@ -357,7 +356,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -369,7 +368,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -386,11 +385,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 										);
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											if (isEqual(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -399,7 +398,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 								} else {
 									// if not an array remove the whole thing altogether!
 									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -415,7 +414,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -427,7 +426,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -442,7 +441,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									};
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 										);
 										if (query.filter?.expression) {
 											query.filter.expression = removeKeysFromExpression(
@@ -452,7 +451,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										}
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											if (isEqual(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -470,7 +469,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										);
 									}
 									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -483,14 +482,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									if (isEqual(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (!checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;
@@ -502,14 +501,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									if (isEqual(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts

@@ -1,41 +0,0 @@
-/**
- * These prefixes are added to attribute keys based on their context.
- */
-export const FIELD_CONTEXT_PREFIXES = [
-	'metric',
-	'log',
-	'span',
-	'trace',
-	'resource',
-	'scope',
-	'attribute',
-	'event',
-	'body',
-];
-
-/**
- * Removes the field context prefix from a key to get the base key name.
- * Example: 'resource.service.name' -> 'service.name'
- * Example: 'attribute.http.method' -> 'http.method'
- */
-export function getKeyWithoutPrefix(key: string | undefined): string {
-	if (!key) {
-		return '';
-	}
-	const prefixPattern = new RegExp(
-		`^(${FIELD_CONTEXT_PREFIXES.join('|')})\\.`,
-		'i',
-	);
-	return key.replace(prefixPattern, '').trim();
-}
-
-/**
- * Compares two keys by their base name (without prefix).
- * This ensures that 'service.name' matches 'resource.service.name'
- */
-export function isKeyMatch(
-	itemKey: string | undefined,
-	filterKey: string | undefined,
-): boolean {
-	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
-}

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/constants/query.ts

@@ -55,5 +55,4 @@ export enum QueryParams {
 	source = 'source',
 	showClassicCreateAlertsPage = 'showClassicCreateAlertsPage',
 	isTestAlert = 'isTestAlert',
-	yAxisUnit = 'yAxisUnit',
 }

frontend/src/constants/theme.ts

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

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

@@ -193,6 +193,7 @@ describe('Dashboard landing page actions header tests', () => {
 			handleDashboardLockToggle: jest.fn(),
 			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,
+			dashboardId: '4',
 			layouts: [],
 			panelMap: {},
 			setPanelMap: jest.fn(),
@@ -204,6 +205,8 @@ describe('Dashboard landing page actions header tests', () => {
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),
+			selectedRowWidgetId: null,
+			setSelectedRowWidgetId: jest.fn(),
 			isDashboardFetching: false,
 			columnWidths: {},
 			setColumnWidths: jest.fn(),

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

@@ -78,6 +78,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		isDashboardLocked,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
+		setSelectedRowWidgetId,
 		handleDashboardLockToggle,
 	} = useDashboard();
 
@@ -145,6 +146,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
+		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts

@@ -67,18 +67,17 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 							const oldVariables = prev?.data.variables;
 							// this is added to handle case where we have two different
 							// schemas for variable response
-							const updatedVariables = { ...oldVariables };
-							if (updatedVariables?.[id]) {
-								updatedVariables[id] = {
-									...updatedVariables[id],
+							if (oldVariables?.[id]) {
+								oldVariables[id] = {
+									...oldVariables[id],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
 								};
 							}
-							if (updatedVariables?.[name]) {
-								updatedVariables[name] = {
-									...updatedVariables[name],
+							if (oldVariables?.[name]) {
+								oldVariables[name] = {
+									...oldVariables[name],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
@@ -88,7 +87,9 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 								...prev,
 								data: {
 									...prev?.data,
-									variables: updatedVariables,
+									variables: {
+										...oldVariables,
+									},
 								},
 							};
 						}

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

@@ -6,6 +6,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -61,7 +62,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

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

@@ -11,6 +11,7 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryData } from 'types/api/widgets/getQuery';
 import { AlignedData } from 'uplot';
 
 import { PanelMode } from '../types';
@@ -43,7 +44,7 @@ export function prepareBarPanelConfig({
 	currentQuery: Query;
 	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
@@ -75,17 +76,13 @@ export function prepareBarPanelConfig({
 		stepInterval: minStepInterval,
 	});
 
-	if (!(apiResponse && apiResponse?.data?.result)) {
-		// if no data, return the builder without adding any series
-		return builder;
-	}
-
 	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
-	apiResponse.data.result.forEach((series) => {
+	const seriesList: QueryData[] = apiResponse?.data?.result || [];
+	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

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

@@ -6,6 +6,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -38,7 +39,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 		return prepareHistogramPanelConfig({
 			widget,
 			isDarkMode,
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			panelMode,
 		});
 	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
@@ -48,7 +49,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 			return [];
 		}
 		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			bucketWidth: widget?.bucketWidth,
 			bucketCount: widget?.bucketCount,
 			mergeAllActiveQueries: widget?.mergeAllActiveQueries,

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

@@ -149,7 +149,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode,
 }: {
 	widget: Widgets;
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	panelMode: PanelMode;
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
@@ -204,7 +204,7 @@ export function prepareHistogramPanelConfig({
 			fillColor: '#4E74F8',
 			isDarkMode,
 		});
-	} else if (apiResponse && apiResponse?.data?.result) {
+	} else {
 		apiResponse.data.result.forEach((series) => {
 			const baseLabelName = getLabelName(
 				series.metric,

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

@@ -9,6 +9,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -67,7 +68,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

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

@@ -68,12 +68,11 @@ export const prepareUPlotConfig = ({
 	currentQuery: Query;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
 	maxTimeScale?: number;
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 }): UPlotConfigBuilder => {
 	const stepIntervals: ExecStats['stepIntervals'] = get(
 		apiResponse,
@@ -101,12 +100,7 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});
 
-	if (!(apiResponse && apiResponse.data.result)) {
-		// if no data, return the builder without adding any series
-		return builder;
-	}
-
-	apiResponse.data.result.forEach((series) => {
+	apiResponse.data?.result?.forEach((series) => {
 		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,

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

@@ -18,7 +18,7 @@ import { PanelMode } from '../types';
 export interface BaseConfigBuilderProps {
 	id: string;
 	thresholds?: ThresholdProps[];
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -19,6 +19,7 @@ export default function DashboardEmptyState(): JSX.Element {
 		selectedDashboard,
 		isDashboardLocked,
 		handleToggleDashboardSlider,
+		setSelectedRowWidgetId,
 	} = useDashboard();
 
 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
@@ -41,6 +42,7 @@ export default function DashboardEmptyState(): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
+		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -71,6 +71,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		isDashboardLocked,
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
+		setSelectedRowWidgetId,
 		isDashboardFetching,
 		columnWidths,
 	} = useDashboard();
@@ -194,6 +195,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 
 		updateDashboardMutation.mutate(updatedDashboard, {
 			onSuccess: (updatedDashboard) => {
+				setSelectedRowWidgetId(null);
 				if (updatedDashboard.data) {
 					if (updatedDashboard.data.data.layout) {
 						setLayouts(sortLayout(updatedDashboard.data.data.layout));

frontend/src/container/GridCardLayout/WidgetRow.tsx

@@ -5,7 +5,6 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import { EllipsisIcon, PenLine, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { setSelectedRowWidgetId } from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
@@ -38,6 +37,7 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 		handleToggleDashboardSlider,
 		selectedDashboard,
 		isDashboardLocked,
+		setSelectedRowWidgetId,
 	} = useDashboard();
 
 	const permissions: ComponentTypes[] = ['add_panel'];
@@ -81,12 +81,7 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 							disabled={!editWidget && addPanelPermission && !isDashboardLocked}
 							icon={<Plus size={14} />}
 							onClick={(): void => {
-								// TODO: @AshwinBhatkal Simplify this check in cleanup of https://github.com/SigNoz/engineering-pod/issues/3953
-								if (!selectedDashboard?.id) {
-									return;
-								}
-
-								setSelectedRowWidgetId(selectedDashboard.id, id);
+								setSelectedRowWidgetId(id);
 								handleToggleDashboardSlider(true);
 							}}
 						>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -39,7 +39,6 @@ import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQuery
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
 import { UpdateTimeInterval } from 'store/actions';
@@ -60,7 +59,6 @@ import LogsActionsContainer from './LogsActionsContainer';
 
 import './LogsExplorerViews.styles.scss';
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function LogsExplorerViewsContainer({
 	setIsLoadingQueries,
 	listQueryKeyRef,
@@ -111,7 +109,7 @@ function LogsExplorerViewsContainer({
 
 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
 
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
+	const [yAxisUnit, setYAxisUnit] = useState<string>('');
 
 	const listQuery = useMemo(() => getListQuery(stagedQuery) || null, [
 		stagedQuery,
@@ -369,6 +367,10 @@ function LogsExplorerViewsContainer({
 		orderBy,
 	]);
 
+	const onUnitChangeHandler = useCallback((value: string): void => {
+		setYAxisUnit(value);
+	}, []);
+
 	const chartData = useMemo(() => {
 		if (!stagedQuery) {
 			return [];
@@ -486,7 +488,10 @@ function LogsExplorerViewsContainer({
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
 							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
+								<BuilderUnitsFilter
+									onChange={onUnitChangeHandler}
+									yAxisUnit={yAxisUnit}
+								/>
 							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,7 +11,6 @@ import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsF
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -23,13 +22,14 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 function TimeSeries(): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const [yAxisUnit, setYAxisUnit] = useState<string>('');
+
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
 
@@ -112,6 +112,10 @@ function TimeSeries(): JSX.Element {
 		[data, isValidToConvertToMs],
 	);
 
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
+	};
+
 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
@@ -119,7 +123,7 @@ function TimeSeries(): JSX.Element {
 
 	return (
 		<div className="meter-time-series-container">
-			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
+			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
 				{hasMetricSelected &&

frontend/src/container/NewWidget/index.tsx

@@ -34,10 +34,6 @@ import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import {
-	clearSelectedRowWidgetId,
-	getSelectedRowWidgetId,
-} from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import {
 	getNextWidgets,
 	getPreviousWidgets,
@@ -90,6 +86,8 @@ function NewWidget({
 		selectedDashboard,
 		setSelectedDashboard,
 		setToScrollWidgetId,
+		selectedRowWidgetId,
+		setSelectedRowWidgetId,
 		columnWidths,
 	} = useDashboard();
 
@@ -452,8 +450,6 @@ function NewWidget({
 		const widgetId = query.get('widgetId') || '';
 		let updatedLayout = selectedDashboard.data.layout || [];
 
-		const selectedRowWidgetId = getSelectedRowWidgetId(dashboardId);
-
 		if (isNewDashboard && isEmpty(selectedRowWidgetId)) {
 			const newLayoutItem = placeWidgetAtBottom(widgetId, updatedLayout);
 			updatedLayout = [...updatedLayout, newLayoutItem];
@@ -558,6 +554,7 @@ function NewWidget({
 
 		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: (updatedDashboard) => {
+				setSelectedRowWidgetId(null);
 				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
 				safeNavigate({
@@ -569,6 +566,7 @@ function NewWidget({
 		selectedDashboard,
 		query,
 		isNewDashboard,
+		selectedRowWidgetId,
 		afterWidgets,
 		selectedWidget,
 		selectedTime.enum,
@@ -579,6 +577,7 @@ function NewWidget({
 		widgets,
 		setSelectedDashboard,
 		setToScrollWidgetId,
+		setSelectedRowWidgetId,
 		safeNavigate,
 		dashboardId,
 	]);
@@ -682,10 +681,6 @@ function NewWidget({
 		 * on mount here with the currentQuery in the begining itself
 		 */
 		setSupersetQuery(currentQuery);
-
-		return (): void => {
-			clearSelectedRowWidgetId(dashboardId);
-		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

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

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -611,34 +611,6 @@
 			]
 		}
 	},
-	{
-		"dataSource": "deno",
-		"label": "Deno",
-		"imgUrl": "/Logos/deno.svg",
-		"tags": [
-			"apm/traces",
-			"logs",
-			"metrics"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"deno",
-			"deno monitoring",
-			"deno observability",
-			"javascript",
-			"js",
-			"ts",
-			"typescript",
-			"opentelemetry deno",
-			"observability",
-			"metrics",
-			"logs",
-			"traces",
-			"tracing"
-		],
-		"id": "deno",
-		"link": "/docs/instrumentation/opentelemetry-deno/"
-	},
 	{
 		"dataSource": "javascript",
 		"label": "JavaScript",
@@ -1856,33 +1828,15 @@
 		],
 		"module": "logs",
 		"relatedSearchKeywords": [
-			"apache",
 			"application log file collection",
-			"c#",
-			"c++",
 			"collect",
 			"collect logs from file",
 			"collect logs from log file",
-			"cpp",
-			"csharp",
 			"custom log file monitoring",
-			"deno",
-			"django",
-			"dotnet",
-			"elixir",
-			"express",
 			"file",
 			"file based logging",
 			"filebeat alternative",
-			"flask",
 			"from-log-file",
-			"go",
-			"golang",
-			"java",
-			"javascript",
-			"js",
-			"kotlin",
-			"linux",
 			"log",
 			"log file ingestion",
 			"log file to signoz",
@@ -1890,29 +1844,7 @@
 			"log tailing with otel",
 			"logging",
 			"logs",
-			"macos",
-			"mongodb",
-			"mysql",
-			"nestjs",
-			"nextjs",
-			"nginx",
-			"otel file logs",
-			"php",
-			"postgres",
-			"postgresql",
-			"python",
-			"rails",
-			"react",
-			"redis",
-			"ruby",
-			"rust",
-			"scala",
-			"spring",
-			"swift",
-			"ts",
-			"typescript",
-			"vue",
-			"windows"
+			"otel file logs"
 		],
 		"link": "/docs/userguide/collect_logs_from_file/"
 	},
@@ -5276,7 +5208,7 @@
 	{
 		"dataSource": "prometheus-metrics",
 		"label": "Prometheus Metrics",
-		"imgUrl": "/Logos/prometheus.svg",
+		"imgUrl": "/Logos/other-metrics.svg",
 		"tags": [
 			"metrics",
 			"infrastructure monitoring"
@@ -5877,250 +5809,5 @@
 				}
 			]
 		}
-	},
-	{
-		"dataSource": "rust-metrics",
-		"label": "Rust Metrics",
-		"imgUrl": "/Logos/rust.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"metrics",
-			"opentelemetry rust",
-			"otel rust",
-			"rust",
-			"rust metrics",
-			"rust monitoring",
-			"rust observability"
-		],
-		"id": "rust-metrics",
-		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/",
-		"question": {
-			"desc": "What is your Environment?",
-			"type": "select",
-			"entityID": "environment",
-			"options": [
-				{
-					"key": "vm",
-					"label": "VM",
-					"imgUrl": "/Logos/vm.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				},
-				{
-					"key": "k8s",
-					"label": "Kubernetes",
-					"imgUrl": "/Logos/kubernetes.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				},
-				{
-					"key": "windows",
-					"label": "Windows",
-					"imgUrl": "/Logos/windows.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				}
-			]
-		}
-	},
-	{
-		"dataSource": "ruby-metrics",
-		"label": "Ruby Metrics",
-		"imgUrl": "/Logos/ruby-on-rails.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"metrics",
-			"opentelemetry ruby",
-			"otel ruby",
-			"ruby",
-			"ruby metrics",
-			"ruby monitoring",
-			"ruby observability",
-			"ruby on rails metrics"
-		],
-		"id": "ruby-metrics",
-		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/",
-		"question": {
-			"desc": "What is your Environment?",
-			"type": "select",
-			"entityID": "environment",
-			"options": [
-				{
-					"key": "vm",
-					"label": "VM",
-					"imgUrl": "/Logos/vm.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				},
-				{
-					"key": "k8s",
-					"label": "Kubernetes",
-					"imgUrl": "/Logos/kubernetes.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				},
-				{
-					"key": "windows",
-					"label": "Windows",
-					"imgUrl": "/Logos/windows.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				}
-			]
-		}
-	},
-	{
-		"dataSource": "statsd",
-		"label": "StatsD",
-		"imgUrl": "/Logos/statsd.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"metrics",
-			"statsd",
-			"statsd metrics",
-			"statsd monitoring",
-			"statsd observability"
-		],
-		"id": "statsd",
-		"link": "/docs/userguide/opentelemetry-statsd/"
-	},
-	{
-		"dataSource": "nvidia-dcgm",
-		"label": "Nvidia DCGM",
-		"imgUrl": "/Logos/nvidia-dcgm.svg",
-		"tags": [
-			"infrastructure monitoring"
-		],
-		"module": "infra-monitoring-hosts",
-		"relatedSearchKeywords": [
-			"dcgm",
-			"gpu monitoring",
-			"infrastructure monitoring",
-			"nvidia",
-			"nvidia dcgm",
-			"nvidia metrics"
-		],
-		"id": "nvidia-dcgm",
-		"link": "/docs/metrics-management/nvidia-dcgm-metrics/"
-	},
-	{
-		"dataSource": "slurm",
-		"label": "Slurm",
-		"imgUrl": "/Logos/slurm.svg",
-		"tags": [
-			"infrastructure monitoring"
-		],
-		"module": "infra-monitoring-hosts",
-		"relatedSearchKeywords": [
-			"infrastructure monitoring",
-			"slurm",
-			"slurm cluster monitoring",
-			"slurm metrics"
-		],
-		"id": "slurm",
-		"link": "/docs/metrics-management/slurm-metrics/"
-	},
-	{
-		"dataSource": "ollama-monitoring",
-		"label": "Ollama",
-		"imgUrl": "/Logos/ollama.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"ollama",
-			"ollama monitoring",
-			"otel ollama",
-			"traces",
-			"tracing"
-		],
-		"id": "ollama-monitoring",
-		"link": "/docs/ollama-monitoring/"
-	},
-	{
-		"dataSource": "haystack-monitoring",
-		"label": "Haystack",
-		"imgUrl": "/Logos/haystack.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"haystack",
-			"haystack monitoring",
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"otel haystack",
-			"traces",
-			"tracing"
-		],
-		"id": "haystack-monitoring",
-		"link": "/docs/haystack-monitoring/"
-	},
-	{
-		"dataSource": "openrouter-observability",
-		"label": "OpenRouter",
-		"imgUrl": "/Logos/openrouter.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"openrouter",
-			"openrouter monitoring",
-			"otel openrouter",
-			"traces",
-			"tracing"
-		],
-		"id": "openrouter-observability",
-		"link": "/docs/openrouter-observability/"
-	},
-	{
-		"dataSource": "huggingface-observability",
-		"label": "Hugging Face",
-		"imgUrl": "/Logos/huggingface.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"hugging face monitoring",
-			"huggingface",
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"otel huggingface",
-			"traces",
-			"tracing"
-		],
-		"id": "huggingface-observability",
-		"link": "/docs/huggingface-observability/"
 	}
 ]

frontend/src/hooks/useGetQueryLabels.test.ts

@@ -1,129 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import {
-	IBuilderFormula,
-	IClickHouseQuery,
-	IPromQLQuery,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-import { useGetQueryLabels } from './useGetQueryLabels';
-
-jest.mock('components/QueryBuilderV2/utils', () => ({
-	getQueryLabelWithAggregation: jest.fn(() => []),
-}));
-
-function buildQuery(overrides: Partial<Query> = {}): Query {
-	return {
-		id: 'test-id',
-		queryType: EQueryType.QUERY_BUILDER,
-		builder: {
-			queryData: [],
-			queryFormulas: [],
-			queryTraceOperator: [],
-		},
-		promql: [],
-		clickhouse_sql: [],
-		...overrides,
-	};
-}
-
-describe('useGetQueryLabels', () => {
-	describe('QUERY_BUILDER type', () => {
-		it('returns empty array when queryFormulas is undefined', () => {
-			const query = buildQuery({
-				queryType: EQueryType.QUERY_BUILDER,
-				builder: {
-					queryData: [],
-					queryFormulas: (undefined as unknown) as IBuilderFormula[],
-					queryTraceOperator: [],
-				},
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([]);
-		});
-
-		it('returns formula labels when queryFormulas is populated', () => {
-			const query = buildQuery({
-				queryType: EQueryType.QUERY_BUILDER,
-				builder: {
-					queryData: [],
-					queryFormulas: [
-						({ queryName: 'F1' } as unknown) as IBuilderFormula,
-						({ queryName: 'F2' } as unknown) as IBuilderFormula,
-					],
-					queryTraceOperator: [],
-				},
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([
-				{ label: 'F1', value: 'F1' },
-				{ label: 'F2', value: 'F2' },
-			]);
-		});
-	});
-
-	describe('CLICKHOUSE type', () => {
-		it('returns empty array when clickhouse_sql is undefined', () => {
-			const query = buildQuery({
-				queryType: EQueryType.CLICKHOUSE,
-				clickhouse_sql: (undefined as unknown) as IClickHouseQuery[],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([]);
-		});
-
-		it('returns labels from clickhouse_sql when populated', () => {
-			const query = buildQuery({
-				queryType: EQueryType.CLICKHOUSE,
-				clickhouse_sql: [
-					({ name: 'query_a' } as unknown) as IClickHouseQuery,
-					({ name: 'query_b' } as unknown) as IClickHouseQuery,
-				],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([
-				{ label: 'query_a', value: 'query_a' },
-				{ label: 'query_b', value: 'query_b' },
-			]);
-		});
-	});
-
-	describe('PROM type (default)', () => {
-		it('returns empty array when promql is undefined', () => {
-			const query = buildQuery({
-				queryType: EQueryType.PROM,
-				promql: (undefined as unknown) as IPromQLQuery[],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([]);
-		});
-
-		it('returns labels from promql when populated', () => {
-			const query = buildQuery({
-				queryType: EQueryType.PROM,
-				promql: [
-					({ name: 'prom_1' } as unknown) as IPromQLQuery,
-					({ name: 'prom_2' } as unknown) as IPromQLQuery,
-				],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([
-				{ label: 'prom_1', value: 'prom_1' },
-				{ label: 'prom_2', value: 'prom_2' },
-			]);
-		});
-	});
-});

frontend/src/hooks/useGetQueryLabels.ts

@@ -11,7 +11,7 @@ export const useGetQueryLabels = (
 			const queryLabels = getQueryLabelWithAggregation(
 				currentQuery?.builder?.queryData || [],
 			);
-			const formulaLabels = (currentQuery?.builder?.queryFormulas ?? []).map(
+			const formulaLabels = currentQuery?.builder?.queryFormulas?.map(
 				(formula) => ({
 					label: formula.queryName,
 					value: formula.queryName,
@@ -20,13 +20,10 @@ export const useGetQueryLabels = (
 			return [...queryLabels, ...formulaLabels];
 		}
 		if (currentQuery?.queryType === EQueryType.CLICKHOUSE) {
-			return (currentQuery?.clickhouse_sql ?? []).map((q) => ({
+			return currentQuery?.clickhouse_sql?.map((q) => ({
 				label: q.name,
 				value: q.name,
 			}));
 		}
-		return (currentQuery?.promql ?? []).map((q) => ({
-			label: q.name,
-			value: q.name,
-		}));
+		return currentQuery?.promql?.map((q) => ({ label: q.name, value: q.name }));
 	}, [currentQuery]);

frontend/src/hooks/useUrlYAxisUnit.ts

@@ -1,33 +0,0 @@
-import { useCallback } from 'react';
-import { QueryParams } from 'constants/query';
-import { parseAsString, useQueryState } from 'nuqs';
-
-interface UseUrlYAxisUnitResult {
-	yAxisUnit: string;
-	onUnitChange: (value: string) => void;
-}
-
-/**
- * Hook to manage y-axis unit synchronized with the URL query param.
- * It:
- * - Initializes from `QueryParams.yAxisUnit` or a provided default
- * - Keeps local state in sync when the URL changes (e.g. back/forward, shared links)
- * - Writes updates back to the URL while preserving existing query params
- */
-function useUrlYAxisUnit(defaultUnit = ''): UseUrlYAxisUnitResult {
-	const [yAxisUnit, setYAxisUnitInUrl] = useQueryState(
-		QueryParams.yAxisUnit,
-		parseAsString.withDefault(defaultUnit),
-	);
-
-	const onUnitChange = useCallback(
-		(value: string): void => {
-			setYAxisUnitInUrl(value || null);
-		},
-		[setYAxisUnitInUrl],
-	);
-
-	return { yAxisUnit, onUnitChange };
-}
-
-export default useUrlYAxisUnit;

frontend/src/index.tsx

@@ -6,7 +6,6 @@ import { Provider } from 'react-redux';
 import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { ThemeProvider } from 'hooks/useDarkMode';
-import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
@@ -46,19 +45,17 @@ if (container) {
 
 	root.render(
 		<HelmetProvider>
-			<NuqsAdapter>
-				<ThemeProvider>
-					<TimezoneProvider>
-						<QueryClientProvider client={queryClient}>
-							<Provider store={store}>
-								<AppProvider>
-									<AppRoutes />
-								</AppProvider>
-							</Provider>
-						</QueryClientProvider>
-					</TimezoneProvider>
-				</ThemeProvider>
-			</NuqsAdapter>
+			<ThemeProvider>
+				<TimezoneProvider>
+					<QueryClientProvider client={queryClient}>
+						<Provider store={store}>
+							<AppProvider>
+								<AppRoutes />
+							</AppProvider>
+						</Provider>
+					</QueryClientProvider>
+				</TimezoneProvider>
+			</ThemeProvider>
 		</HelmetProvider>,
 	);
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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,222 +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;
-
-		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
-		const firstLevel = Math.max(
-			0,
-			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
-		);
-		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
-		const visibleLevelCount =
-			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
-
-		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
-
-		ctx.clearRect(0, 0, cssWidth, viewportHeight);
-
-		const spanRectsArray: SpanRect[] = [];
-
-		// ---- Draw only visible levels ----
-		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
-			const levelSpans = spans[levelIndex];
-			if (!levelSpans) {
-				continue;
-			}
-
-			drawLevel({
-				ctx,
-				levelSpans,
-				levelIndex,
-				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
-				viewStartTs,
-				timeSpan,
-				cssWidth,
-				selectedSpanId,
-				hoveredSpanId,
-				isDarkMode,
-				spanRectsArray,
-				metrics,
-			});
-		}
-
-		spanRectsRef.current = spanRectsArray;
-	}, [
-		canvasRef,
-		containerRef,
-		spanRectsRef,
-		spans,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-	]);
-
-	// TODO: spanRectsRef is a flat array — hover scans all visible rects O(N).
-	// Upgrade to per-level buckets: spanRects[levelIndex] = [...] so hover can
-	// compute level from mouseY / ROW_HEIGHT and scan only that row.
-	// Further: binary search within a level by x (spans are sorted by start time)
-	// to reduce hover cost from O(N) to O(log N).
-	return { drawFlamegraph, spanRectsRef };
-}

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

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

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

@@ -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.traceDetailColorsV3);
-
-	if (span.hasError) {
-		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-	}
-
-	return color;
-}
-
-interface DrawEventDotArgs {
-	ctx: CanvasRenderingContext2D;
-	x: number;
-	y: number;
-	isError: boolean;
-	isDarkMode: boolean;
-	eventDotSize: number;
-}
-
-export function drawEventDot(args: DrawEventDotArgs): void {
-	const { ctx, x, y, isError, isDarkMode, eventDotSize } = args;
-
-	ctx.save();
-	ctx.translate(x, y);
-	ctx.rotate(Math.PI / 4);
-
-	if (isError) {
-		ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-		ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
-	} else {
-		ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
-		ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
-	}
-
-	ctx.lineWidth = 1;
-	const half = eventDotSize / 2;
-	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.restore();
-}
-
-interface DrawSpanBarArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	levelIndex: number;
-	spanRectsArray: SpanRect[];
-	color: string;
-	isDarkMode: boolean;
-	metrics: FlamegraphRowMetrics;
-	selectedSpanId?: string | null;
-	hoveredSpanId?: string | null;
-}
-
-export function drawSpanBar(args: DrawSpanBarArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		levelIndex,
-		spanRectsArray,
-		color,
-		isDarkMode,
-		metrics,
-		selectedSpanId,
-		hoveredSpanId,
-	} = args;
-
-	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
-	const isSelected = selectedSpanId === span.spanId;
-	const isHovered = hoveredSpanId === span.spanId;
-	const isSelectedOrHovered = isSelected || isHovered;
-
-	ctx.beginPath();
-	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
-
-	if (isSelectedOrHovered) {
-		// Diagonal stripe pattern (repeating-linear-gradient -45deg style) + border in span color
-		const pattern = createStripePattern(ctx, color);
-		if (pattern) {
-			ctx.fillStyle = pattern;
-			ctx.fill();
-		}
-		if (isSelected) {
-			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
-		}
-		ctx.strokeStyle = color;
-		ctx.lineWidth = isSelected ? 2 : 1;
-		ctx.stroke();
-		if (isSelected) {
-			ctx.setLineDash([]);
-		}
-	} else {
-		ctx.fillStyle = color;
-		ctx.fill();
-	}
-
-	spanRectsArray.push({
-		span,
-		x,
-		y: spanY,
-		width,
-		height: metrics.SPAN_BAR_HEIGHT,
-		level: levelIndex,
-	});
-
-	span.event?.forEach((event) => {
-		const spanDurationMs = span.durationNano / 1e6;
-		if (spanDurationMs <= 0) {
-			return;
-		}
-
-		const eventTimeMs = event.timeUnixNano / 1e6;
-		const eventOffsetPercent =
-			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
-		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
-		const eventX = x + (clampedOffset / 100) * width;
-		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
-
-		drawEventDot({
-			ctx,
-			x: eventX,
-			y: eventY,
-			isError: event.isError,
-			isDarkMode,
-			eventDotSize: metrics.EVENT_DOT_SIZE,
-		});
-	});
-
-	drawSpanLabel({
-		ctx,
-		span,
-		x,
-		y: spanY,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
-	});
-}
-
-export function formatDuration(durationNano: number): string {
-	const durationMs = durationNano / 1e6;
-	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
-	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
-}
-
-interface DrawSpanLabelArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	color: string;
-	isSelectedOrHovered: boolean;
-	isDarkMode: boolean;
-	spanBarHeight: number;
-}
-
-function drawSpanLabel(args: DrawSpanLabelArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight,
-	} = args;
-
-	if (width < MIN_WIDTH_FOR_NAME) {
-		return;
-	}
-
-	const name = span.name;
-
-	ctx.save();
-
-	// Clip text to span bar bounds
-	ctx.beginPath();
-	ctx.rect(x, y, width, spanBarHeight);
-	ctx.clip();
-
-	ctx.font = LABEL_FONT;
-	ctx.fillStyle = isSelectedOrHovered
-		? color
-		: isDarkMode
-		? 'rgba(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,37 +0,0 @@
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-} from '@signozhq/resizable';
-
-import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
-import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
-
-function TraceDetailsV3(): JSX.Element {
-	return (
-		<div
-			style={{
-				height: 'calc(100vh - 90px)',
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			<TraceDetailsHeader />
-			<ResizablePanelGroup
-				direction="vertical"
-				autoSaveId="trace-details-v3-layout"
-				style={{ flex: 1 }}
-			>
-				<ResizablePanel defaultSize={40} minSize={20} maxSize={80}>
-					<TraceFlamegraph />
-				</ResizablePanel>
-				<ResizableHandle withHandle />
-				<ResizablePanel defaultSize={60} minSize={20}>
-					<div />
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-export default TraceDetailsV3;

frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx

@@ -4,6 +4,7 @@ import {
 	SetStateAction,
 	useEffect,
 	useMemo,
+	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -15,7 +16,6 @@ import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
@@ -52,8 +52,13 @@ function TimeSeriesViewContainer({
 		return isValid.every(Boolean);
 	}, [currentQuery]);
 
-	const defaultUnit = isValidToConvertToMs ? 'ms' : 'short';
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit(defaultUnit);
+	const [yAxisUnit, setYAxisUnit] = useState<string>(
+		isValidToConvertToMs ? 'ms' : 'short',
+	);
+
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
+	};
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
@@ -116,7 +121,7 @@ function TimeSeriesViewContainer({
 	return (
 		<div className="trace-explorer-time-series-view-container">
 			<div className="trace-explorer-time-series-view-container-header">
-				<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
+				<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
 			</div>
 			<TimeSeriesView
 				isFilterApplied={isFilterApplied}

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -68,6 +68,7 @@ export const DashboardContext = createContext<IDashboardContext>({
 		APIError
 	>,
 	selectedDashboard: {} as Dashboard,
+	dashboardId: '',
 	layouts: [],
 	panelMap: {},
 	setPanelMap: () => {},
@@ -80,6 +81,8 @@ export const DashboardContext = createContext<IDashboardContext>({
 	updateLocalStorageDashboardVariables: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
+	selectedRowWidgetId: '',
+	setSelectedRowWidgetId: () => {},
 	isDashboardFetching: false,
 	columnWidths: {},
 	setColumnWidths: () => {},
@@ -99,6 +102,10 @@ export function DashboardProvider({
 
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
+	const [selectedRowWidgetId, setSelectedRowWidgetId] = useState<string | null>(
+		null,
+	);
+
 	const [
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
@@ -461,6 +468,8 @@ export function DashboardProvider({
 			updateLocalStorageDashboardVariables,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
+			selectedRowWidgetId,
+			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,
@@ -479,6 +488,8 @@ export function DashboardProvider({
 			currentDashboard,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
+			selectedRowWidgetId,
+			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,

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

@@ -58,9 +58,8 @@ jest.mock('react-redux', () => ({
 jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));
 
 function TestComponent(): JSX.Element {
-	const { dashboardResponse, selectedDashboard } = useDashboard();
+	const { dashboardResponse, dashboardId, selectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
-	const dashboardId = selectedDashboard?.id;
 
 	return (
 		<div>

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

@@ -1,28 +0,0 @@
-const PREFIX = 'dashboard_row_widget_';
-
-function getKey(dashboardId: string): string {
-	return `${PREFIX}${dashboardId}`;
-}
-
-export function setSelectedRowWidgetId(
-	dashboardId: string,
-	widgetId: string,
-): void {
-	const key = getKey(dashboardId);
-
-	// remove all other selected widget ids for the dashboard before setting the new one
-	// to ensure only one widget is selected at a time. Helps out in weird navigate and refresh scenarios
-	Object.keys(sessionStorage)
-		.filter((k) => k.startsWith(PREFIX) && k !== key)
-		.forEach((k) => sessionStorage.removeItem(k));
-
-	sessionStorage.setItem(key, widgetId);
-}
-
-export function getSelectedRowWidgetId(dashboardId: string): string | null {
-	return sessionStorage.getItem(getKey(dashboardId));
-}
-
-export function clearSelectedRowWidgetId(dashboardId: string): void {
-	sessionStorage.removeItem(getKey(dashboardId));
-}

frontend/src/providers/Dashboard/types.ts

@@ -15,6 +15,7 @@ export interface IDashboardContext {
 	handleDashboardLockToggle: (value: boolean) => void;
 	dashboardResponse: UseQueryResult<SuccessResponseV2<Dashboard>, unknown>;
 	selectedDashboard: Dashboard | undefined;
+	dashboardId: string;
 	layouts: Layout[];
 	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
 	setPanelMap: React.Dispatch<React.SetStateAction<Record<string, any>>>;
@@ -39,6 +40,8 @@ export interface IDashboardContext {
 	) => void;
 	dashboardQueryRangeCalled: boolean;
 	setDashboardQueryRangeCalled: (value: boolean) => void;
+	selectedRowWidgetId: string | null;
+	setSelectedRowWidgetId: React.Dispatch<React.SetStateAction<string | null>>;
 	isDashboardFetching: boolean;
 	columnWidths: WidgetColumnWidths;
 	setColumnWidths: React.Dispatch<React.SetStateAction<WidgetColumnWidths>>;

frontend/src/tests/test-utils.tsx

@@ -7,7 +7,6 @@ import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { FeatureKeys } from 'constants/features';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
-import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
@@ -281,25 +280,23 @@ export function AllTheProviders({
 
 	return (
 		<MemoryRouter initialEntries={[initialRouteValue]}>
-			<NuqsAdapter>
-				<QueryClientProvider client={queryClient}>
-					<Provider store={mockStored(roleValue)}>
-						<AppContext.Provider
-							value={getAppContextMock(roleValue, appContextOverridesValue)}
-						>
-							<ResourceProvider>
-								<ErrorModalProvider>
-									<TimezoneProvider>
-										<PreferenceContextProvider>
-											{queryBuilderContent}
-										</PreferenceContextProvider>
-									</TimezoneProvider>
-								</ErrorModalProvider>
-							</ResourceProvider>
-						</AppContext.Provider>
-					</Provider>
-				</QueryClientProvider>
-			</NuqsAdapter>
+			<QueryClientProvider client={queryClient}>
+				<Provider store={mockStored(roleValue)}>
+					<AppContext.Provider
+						value={getAppContextMock(roleValue, appContextOverridesValue)}
+					>
+						<ResourceProvider>
+							<ErrorModalProvider>
+								<TimezoneProvider>
+									<PreferenceContextProvider>
+										{queryBuilderContent}
+									</PreferenceContextProvider>
+								</TimezoneProvider>
+							</ErrorModalProvider>
+						</ResourceProvider>
+					</AppContext.Provider>
+				</Provider>
+			</QueryClientProvider>
 		</MemoryRouter>
 	);
 }

go.mod

@@ -11,7 +11,6 @@ require (
 	github.com/SigNoz/signoz-otel-collector v0.144.2
 	github.com/antlr4-go/antlr/v4 v4.13.1
 	github.com/antonmedv/expr v1.15.3
-	github.com/bytedance/sonic v1.14.1
 	github.com/cespare/xxhash/v2 v2.3.0
 	github.com/coreos/go-oidc/v3 v3.17.0
 	github.com/dgraph-io/ristretto/v2 v2.3.0
@@ -106,6 +105,7 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/sts v1.41.6 // indirect
 	github.com/aws/smithy-go v1.24.0 // indirect
 	github.com/bytedance/gopkg v0.1.3 // indirect
+	github.com/bytedance/sonic v1.14.1 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.8 // indirect

pkg/modules/promote/implpromote/module.go

@@ -78,7 +78,7 @@ func (m *module) ListPromotedAndIndexedPaths(ctx context.Context) ([]promotetype
 
 	// add the paths that are not promoted but have indexes
 	for path, indexes := range aggr {
-		path := strings.TrimPrefix(path, telemetrylogs.BodyJSONColumnPrefix)
+		path := strings.TrimPrefix(path, telemetrylogs.BodyV2ColumnPrefix)
 		path = telemetrytypes.BodyJSONStringSearchPrefix + path
 		response = append(response, promotetypes.PromotePath{
 			Path:    path,
@@ -163,7 +163,7 @@ func (m *module) PromoteAndIndexPaths(
 			}
 		}
 		if len(it.Indexes) > 0 {
-			parentColumn := telemetrylogs.LogsV2BodyJSONColumn
+			parentColumn := telemetrylogs.LogsV2BodyV2Column
 			// if the path is already promoted or is being promoted, add it to the promoted column
 			if _, promoted := existingPromotedPaths[it.Path]; promoted || it.Promote {
 				parentColumn = telemetrylogs.LogsV2BodyPromotedColumn

pkg/querier/builder_query.go

@@ -10,13 +10,11 @@ import (
 
 	"github.com/ClickHouse/clickhouse-go/v2"
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/telemetrylogs"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"github.com/bytedance/sonic"
 )
 
 type builderQuery[T any] struct {
@@ -262,40 +260,6 @@ func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string,
 		return nil, err
 	}
 
-	// merge body_json and promoted into body
-	if q.spec.Signal == telemetrytypes.SignalLogs {
-		switch typedPayload := payload.(type) {
-		case *qbtypes.RawData:
-			for _, rr := range typedPayload.Rows {
-				seeder := func() error {
-					body, ok := rr.Data[telemetrylogs.LogsV2BodyJSONColumn].(map[string]any)
-					if !ok {
-						return nil
-					}
-					promoted, ok := rr.Data[telemetrylogs.LogsV2BodyPromotedColumn].(map[string]any)
-					if !ok {
-						return nil
-					}
-					seed(promoted, body)
-					str, err := sonic.MarshalString(body)
-					if err != nil {
-						return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to marshal body")
-					}
-					rr.Data["body"] = str
-					return nil
-				}
-				err := seeder()
-				if err != nil {
-					return nil, err
-				}
-
-				delete(rr.Data, telemetrylogs.LogsV2BodyJSONColumn)
-				delete(rr.Data, telemetrylogs.LogsV2BodyPromotedColumn)
-			}
-			payload = typedPayload
-		}
-	}
-
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,
@@ -423,18 +387,3 @@ func decodeCursor(cur string) (int64, error) {
 	}
 	return strconv.ParseInt(string(b), 10, 64)
 }
-
-func seed(promoted map[string]any, body map[string]any) {
-	for key, fromValue := range promoted {
-		if toValue, ok := body[key]; !ok {
-			body[key] = fromValue
-		} else {
-			if fromValue, ok := fromValue.(map[string]any); ok {
-				if toValue, ok := toValue.(map[string]any); ok {
-					seed(fromValue, toValue)
-					body[key] = toValue
-				}
-			}
-		}
-	}
-}

pkg/querier/consume.go

@@ -14,7 +14,6 @@ import (
 	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"github.com/bytedance/sonic"
 )
 
 var (
@@ -394,17 +393,11 @@ func readAsRaw(rows driver.Rows, queryName string) (*qbtypes.RawData, error) {
 
 			// de-reference the typed pointer to any
 			val := reflect.ValueOf(cellPtr).Elem().Interface()
-
-			// Post-process JSON columns: normalize into structured values
+			// Post-process JSON columns: normalize into String value
 			if strings.HasPrefix(strings.ToUpper(colTypes[i].DatabaseTypeName()), "JSON") {
 				switch x := val.(type) {
 				case []byte:
-					if len(x) > 0 {
-						var v any
-						if err := sonic.Unmarshal(x, &v); err == nil {
-							val = v
-						}
-					}
+					val = string(x)
 				default:
 					// already a structured type (map[string]any, []any, etc.)
 				}

pkg/querybuilder/fallback_expr.go

@@ -204,7 +204,10 @@ func DataTypeCollisionHandledFieldName(key *telemetrytypes.TelemetryFieldKey, va
 	// While we expect user not to send the mixed data types, it inevitably happens
 	// So we handle the data type collisions here
 	switch key.FieldDataType {
-	case telemetrytypes.FieldDataTypeString, telemetrytypes.FieldDataTypeArrayString:
+	case telemetrytypes.FieldDataTypeString, telemetrytypes.FieldDataTypeArrayString, telemetrytypes.FieldDataTypeJSON:
+		if key.FieldDataType == telemetrytypes.FieldDataTypeJSON {
+			tblFieldName = fmt.Sprintf("toString(%s)", tblFieldName)
+		}
 		switch v := value.(type) {
 		case float64:
 			// try to convert the string value to to number
@@ -219,7 +222,6 @@ func DataTypeCollisionHandledFieldName(key *telemetrytypes.TelemetryFieldKey, va
 			// we don't have a toBoolOrNull in ClickHouse, so we need to convert the bool to a string
 			value = fmt.Sprintf("%t", v)
 		}
-
 	case telemetrytypes.FieldDataTypeInt64,
 		telemetrytypes.FieldDataTypeArrayInt64,
 		telemetrytypes.FieldDataTypeNumber,

pkg/querybuilder/where_clause_visitor.go

@@ -313,37 +313,33 @@ func (v *filterExpressionVisitor) VisitPrimary(ctx *grammar.PrimaryContext) any
 			return ""
 		}
 		child := ctx.GetChild(0)
+		var searchText string
 		if keyCtx, ok := child.(*grammar.KeyContext); ok {
 			// create a full text search condition on the body field
-
-			keyText := keyCtx.GetText()
-			cond, err := v.conditionBuilder.ConditionFor(context.Background(), v.fullTextColumn, qbtypes.FilterOperatorRegexp, FormatFullTextSearch(keyText), v.builder, v.startNs, v.endNs)
-			if err != nil {
-				v.errors = append(v.errors, fmt.Sprintf("failed to build full text search condition: %s", err.Error()))
-				return ""
-			}
-			return cond
+			searchText = keyCtx.GetText()
 		} else if valCtx, ok := child.(*grammar.ValueContext); ok {
-			var text string
 			if valCtx.QUOTED_TEXT() != nil {
-				text = trimQuotes(valCtx.QUOTED_TEXT().GetText())
+				searchText = trimQuotes(valCtx.QUOTED_TEXT().GetText())
 			} else if valCtx.NUMBER() != nil {
-				text = valCtx.NUMBER().GetText()
+				searchText = valCtx.NUMBER().GetText()
 			} else if valCtx.BOOL() != nil {
-				text = valCtx.BOOL().GetText()
+				searchText = valCtx.BOOL().GetText()
 			} else if valCtx.KEY() != nil {
-				text = valCtx.KEY().GetText()
+				searchText = valCtx.KEY().GetText()
 			} else {
 				v.errors = append(v.errors, fmt.Sprintf("unsupported value type: %s", valCtx.GetText()))
 				return ""
 			}
-			cond, err := v.conditionBuilder.ConditionFor(context.Background(), v.fullTextColumn, qbtypes.FilterOperatorRegexp, FormatFullTextSearch(text), v.builder, v.startNs, v.endNs)
-			if err != nil {
-				v.errors = append(v.errors, fmt.Sprintf("failed to build full text search condition: %s", err.Error()))
-				return ""
-			}
-			return cond
+		} else {
+			// Child is neither KeyContext nor ValueContext, return empty condition
+			return ""
 		}
+		cond, err := v.conditionBuilder.ConditionFor(context.Background(), v.fullTextColumn, qbtypes.FilterOperatorRegexp, FormatFullTextSearch(searchText), v.builder, v.startNs, v.endNs)
+		if err != nil {
+			v.errors = append(v.errors, fmt.Sprintf("failed to build full text search condition: %s", err.Error()))
+			return ""
+		}
+		return cond
 	}
 
 	return "" // Should not happen with valid input
@@ -383,6 +379,7 @@ func (v *filterExpressionVisitor) VisitComparison(ctx *grammar.ComparisonContext
 		for _, key := range keys {
 			condition, err := v.conditionBuilder.ConditionFor(context.Background(), key, op, nil, v.builder, v.startNs, v.endNs)
 			if err != nil {
+				v.errors = append(v.errors, fmt.Sprintf("failed to build condition: %s", err.Error()))
 				return ""
 			}
 			conds = append(conds, condition)
@@ -648,7 +645,6 @@ func (v *filterExpressionVisitor) VisitValueList(ctx *grammar.ValueListContext)
 
 // VisitFullText handles standalone quoted strings for full-text search
 func (v *filterExpressionVisitor) VisitFullText(ctx *grammar.FullTextContext) any {
-
 	if v.skipFullTextFilter {
 		return ""
 	}
@@ -670,6 +666,7 @@ func (v *filterExpressionVisitor) VisitFullText(ctx *grammar.FullTextContext) an
 		v.errors = append(v.errors, fmt.Sprintf("failed to build full text search condition: %s", err.Error()))
 		return ""
 	}
+
 	return cond
 }
 

pkg/telemetrylogs/condition_builder.go

@@ -3,14 +3,12 @@ package telemetrylogs
 import (
 	"context"
 	"fmt"
-	"slices"
 
 	schema "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"golang.org/x/exp/maps"
 
 	"github.com/huandu/go-sqlbuilder"
 )
@@ -35,7 +33,7 @@ func (c *conditionBuilder) conditionFor(
 		return "", err
 	}
 
-	if column.Type.GetType() == schema.ColumnTypeEnumJSON && querybuilder.BodyJSONQueryEnabled {
+	if column.Type.GetType() == schema.ColumnTypeEnumJSON && querybuilder.BodyJSONQueryEnabled && key.FieldContext != telemetrytypes.FieldContextLog {
 		valueType, value := InferDataType(value, operator, key)
 		cond, err := NewJSONConditionBuilder(key, valueType).buildJSONCondition(operator, value, sb)
 		if err != nil {
@@ -108,7 +106,6 @@ func (c *conditionBuilder) conditionFor(
 		return sb.ILike(tblFieldName, fmt.Sprintf("%%%s%%", value)), nil
 	case qbtypes.FilterOperatorNotContains:
 		return sb.NotILike(tblFieldName, fmt.Sprintf("%%%s%%", value)), nil
-
 	case qbtypes.FilterOperatorRegexp:
 		// Note: Escape $$ to $$$$ to avoid sqlbuilder interpreting materialized $ signs
 		// Only needed because we are using sprintf instead of sb.Match (not implemented in sqlbuilder)
@@ -176,9 +173,16 @@ func (c *conditionBuilder) conditionFor(
 		var value any
 		switch column.Type.GetType() {
 		case schema.ColumnTypeEnumJSON:
-			if operator == qbtypes.FilterOperatorExists {
-				return sb.IsNotNull(tblFieldName), nil
-			} else {
+			switch key.FieldDataType {
+			case telemetrytypes.FieldDataTypeJSON:
+				if operator == qbtypes.FilterOperatorExists {
+					return sb.EQ(fmt.Sprintf("empty(%s)", tblFieldName), false), nil
+				}
+				return sb.EQ(fmt.Sprintf("empty(%s)", tblFieldName), true), nil
+			default:
+				if operator == qbtypes.FilterOperatorExists {
+					return sb.IsNotNull(tblFieldName), nil
+				}
 				return sb.IsNull(tblFieldName), nil
 			}
 		case schema.ColumnTypeEnumLowCardinality:
@@ -247,19 +251,31 @@ func (c *conditionBuilder) ConditionFor(
 		return "", err
 	}
 
-	if !(key.FieldContext == telemetrytypes.FieldContextBody && querybuilder.BodyJSONQueryEnabled) && operator.AddDefaultExistsFilter() {
-		// skip adding exists filter for intrinsic fields
-		// with an exception for body json search
-		field, _ := c.fm.FieldFor(ctx, key)
-		if slices.Contains(maps.Keys(IntrinsicFields), field) && key.FieldContext != telemetrytypes.FieldContextBody {
+	// Skip adding exists filter for intrinsic fields i.e. Table level log context fields
+	buildExistCondition := operator.AddDefaultExistsFilter()
+	switch key.FieldContext {
+	case telemetrytypes.FieldContextLog, telemetrytypes.FieldContextScope:
+		// pass; No need to build exist condition for top level columns
+		// immidiately return
+		return condition, nil
+	case telemetrytypes.FieldContextResource, telemetrytypes.FieldContextAttribute:
+		// pass; buildExistCondition already has the correct value
+	case telemetrytypes.FieldContextBody:
+		// Querying JSON fields already account for Nullability of fields
+		// so additional exists checks are not needed
+		if querybuilder.BodyJSONQueryEnabled {
 			return condition, nil
 		}
+		// pass; buildExistCondition already has the correct value
+	}
 
+	if buildExistCondition {
 		existsCondition, err := c.conditionFor(ctx, key, qbtypes.FilterOperatorExists, nil, sb)
 		if err != nil {
 			return "", err
 		}
 		return sb.And(condition, existsCondition), nil
 	}
+
 	return condition, nil
 }

pkg/telemetrylogs/condition_builder_test.go

@@ -127,7 +127,8 @@ func TestConditionFor(t *testing.T) {
 		{
 			name: "Contains operator - body",
 			key: telemetrytypes.TelemetryFieldKey{
-				Name: "body",
+				Name:         "body",
+				FieldContext: telemetrytypes.FieldContextLog,
 			},
 			operator:      qbtypes.FilterOperatorContains,
 			value:         521509198310,

pkg/telemetrylogs/const.go

@@ -1,7 +1,10 @@
 package telemetrylogs
 
 import (
+	"fmt"
+
 	"github.com/SigNoz/signoz-otel-collector/constants"
+	"github.com/SigNoz/signoz/pkg/querybuilder"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
@@ -17,7 +20,7 @@ const (
 	LogsV2TimestampColumn         = "timestamp"
 	LogsV2ObservedTimestampColumn = "observed_timestamp"
 	LogsV2BodyColumn              = "body"
-	LogsV2BodyJSONColumn          = constants.BodyV2Column
+	LogsV2BodyV2Column            = constants.BodyV2Column
 	LogsV2BodyPromotedColumn      = constants.BodyPromotedColumn
 	LogsV2TraceIDColumn           = "trace_id"
 	LogsV2SpanIDColumn            = "span_id"
@@ -34,11 +37,23 @@ const (
 	LogsV2ResourcesStringColumn  = "resources_string"
 	LogsV2ScopeStringColumn      = "scope_string"
 
-	BodyJSONColumnPrefix     = constants.BodyV2ColumnPrefix
+	BodyV2ColumnPrefix       = constants.BodyV2ColumnPrefix
 	BodyPromotedColumnPrefix = constants.BodyPromotedColumnPrefix
+	MessageSubColumn         = "body_v2.message"
+	bodySearchDefaultWarning = "body searches default to `body.message:string`. Use `body.<key>` to search a different field inside body"
 )
 
 var (
+	// mapping for body logical field to message sub column
+	// Here field context is log since message is a type hint and
+	// in a sense it is a direct column of log table and doesn't need any lambda expressions
+	// TODO(Piyush): Add description for detailed explanation of remapping of body to message
+	BodyLogicalFieldJSONMapping = &telemetrytypes.TelemetryFieldKey{
+		Name:          MessageSubColumn,
+		Signal:        telemetrytypes.SignalLogs,
+		FieldContext:  telemetrytypes.FieldContextLog,
+		FieldDataType: telemetrytypes.FieldDataTypeString,
+	}
 	DefaultFullTextColumn = &telemetrytypes.TelemetryFieldKey{
 		Name:          "body",
 		Signal:        telemetrytypes.SignalLogs,
@@ -118,3 +133,23 @@ var (
 		},
 	}
 )
+
+func bodyAliasExpression() string {
+	if !querybuilder.BodyJSONQueryEnabled {
+		return LogsV2BodyColumn
+	}
+
+	return fmt.Sprintf("%s as body", LogsV2BodyV2Column)
+}
+
+func enrichMapsForJSONBodyEnabled() {
+	if querybuilder.BodyJSONQueryEnabled {
+		DefaultFullTextColumn = BodyLogicalFieldJSONMapping
+		IntrinsicFields["body"] = *BodyLogicalFieldJSONMapping
+		IntrinsicFields[MessageSubColumn] = *BodyLogicalFieldJSONMapping
+	}
+}
+
+func init() {
+	enrichMapsForJSONBodyEnabled()
+}

pkg/telemetrylogs/field_mapper.go

@@ -30,7 +30,7 @@ var (
 		"severity_text":      {Name: "severity_text", Type: schema.LowCardinalityColumnType{ElementType: schema.ColumnTypeString}},
 		"severity_number":    {Name: "severity_number", Type: schema.ColumnTypeUInt8},
 		"body":               {Name: "body", Type: schema.ColumnTypeString},
-		LogsV2BodyJSONColumn: {Name: LogsV2BodyJSONColumn, Type: schema.JSONColumnType{
+		LogsV2BodyV2Column: {Name: LogsV2BodyV2Column, Type: schema.JSONColumnType{
 			MaxDynamicTypes: utils.ToPointer(uint(32)),
 			MaxDynamicPaths: utils.ToPointer(uint(0)),
 		}},
@@ -58,6 +58,7 @@ var (
 			KeyType:   schema.LowCardinalityColumnType{ElementType: schema.ColumnTypeString},
 			ValueType: schema.ColumnTypeString,
 		}},
+		MessageSubColumn: {Name: MessageSubColumn, Type: schema.ColumnTypeString},
 	}
 )
 
@@ -89,9 +90,9 @@ func (m *fieldMapper) getColumn(_ context.Context, key *telemetrytypes.Telemetry
 		}
 	case telemetrytypes.FieldContextBody:
 		// Body context is for JSON body fields
-		// Use body_json if feature flag is enabled
+		// Use body_v2 if feature flag is enabled
 		if querybuilder.BodyJSONQueryEnabled {
-			return logsV2Columns[LogsV2BodyJSONColumn], nil
+			return logsV2Columns[LogsV2BodyV2Column], nil
 		}
 		// Fall back to legacy body column
 		return logsV2Columns["body"], nil
@@ -100,9 +101,9 @@ func (m *fieldMapper) getColumn(_ context.Context, key *telemetrytypes.Telemetry
 		if !ok {
 			// check if the key has body JSON search
 			if strings.HasPrefix(key.Name, telemetrytypes.BodyJSONStringSearchPrefix) {
-				// Use body_json if feature flag is enabled and we have a body condition builder
+				// Use body_v2 if feature flag is enabled and we have a body condition builder
 				if querybuilder.BodyJSONQueryEnabled {
-					return logsV2Columns[LogsV2BodyJSONColumn], nil
+					return logsV2Columns[LogsV2BodyV2Column], nil
 				}
 				// Fall back to legacy body column
 				return logsV2Columns["body"], nil
@@ -147,6 +148,8 @@ func (m *fieldMapper) FieldFor(ctx context.Context, key *telemetrytypes.Telemetr
 			}
 
 			return m.buildFieldForJSON(key)
+		case telemetrytypes.FieldContextLog:
+			return column.Name, nil
 		default:
 			return "", errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "only resource/body context fields are supported for json columns, got %s", key.FieldContext.String)
 		}

pkg/telemetrylogs/json_condition_builder.go

@@ -30,7 +30,7 @@ func NewJSONConditionBuilder(key *telemetrytypes.TelemetryFieldKey, valueType te
 	return &jsonConditionBuilder{key: key, valueType: telemetrytypes.MappingFieldDataTypeToJSONDataType[valueType]}
 }
 
-// BuildCondition builds the full WHERE condition for body_json JSON paths
+// BuildCondition builds the full WHERE condition for body_v2 JSON paths
 func (c *jsonConditionBuilder) buildJSONCondition(operator qbtypes.FilterOperator, value any, sb *sqlbuilder.SelectBuilder) (string, error) {
 	conditions := []string{}
 	for _, node := range c.key.JSONPlan {
@@ -40,6 +40,7 @@ func (c *jsonConditionBuilder) buildJSONCondition(operator qbtypes.FilterOperato
 		}
 		conditions = append(conditions, condition)
 	}
+
 	return sb.Or(conditions...), nil
 }
 
@@ -288,9 +289,9 @@ func (c *jsonConditionBuilder) applyOperator(sb *sqlbuilder.SelectBuilder, field
 		}
 		return sb.NotIn(fieldExpr, values...), nil
 	case qbtypes.FilterOperatorExists:
-		return fmt.Sprintf("%s IS NOT NULL", fieldExpr), nil
+		return sb.IsNotNull(fieldExpr), nil
 	case qbtypes.FilterOperatorNotExists:
-		return fmt.Sprintf("%s IS NULL", fieldExpr), nil
+		return sb.IsNull(fieldExpr), nil
 	// between and not between
 	case qbtypes.FilterOperatorBetween, qbtypes.FilterOperatorNotBetween:
 		values, ok := value.([]any)

pkg/telemetrylogs/statement_builder.go

@@ -65,7 +65,7 @@ func (b *logQueryStatementBuilder) Build(
 	start = querybuilder.ToNanoSecs(start)
 	end = querybuilder.ToNanoSecs(end)
 
-	keySelectors := getKeySelectors(query)
+	keySelectors, warnings := getKeySelectors(query)
 	keys, _, err := b.metadataStore.GetKeysMulti(ctx, keySelectors)
 	if err != nil {
 		return nil, err
@@ -76,20 +76,32 @@ func (b *logQueryStatementBuilder) Build(
 	// Create SQL builder
 	q := sqlbuilder.NewSelectBuilder()
 
+	var stmt *qbtypes.Statement
 	switch requestType {
 	case qbtypes.RequestTypeRaw, qbtypes.RequestTypeRawStream:
-		return b.buildListQuery(ctx, q, query, start, end, keys, variables)
+		stmt, err = b.buildListQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeTimeSeries:
-		return b.buildTimeSeriesQuery(ctx, q, query, start, end, keys, variables)
+		stmt, err = b.buildTimeSeriesQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeScalar:
-		return b.buildScalarQuery(ctx, q, query, start, end, keys, false, variables)
+		stmt, err = b.buildScalarQuery(ctx, q, query, start, end, keys, false, variables)
+	default:
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported request type: %s", requestType)
 	}
 
-	return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported request type: %s", requestType)
+	if err != nil {
+		return nil, err
+	}
+
+	if stmt != nil && len(warnings) > 0 {
+		stmt.Warnings = append(stmt.Warnings, warnings...)
+	}
+
+	return stmt, nil
 }
 
-func getKeySelectors(query qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]) []*telemetrytypes.FieldKeySelector {
+func getKeySelectors(query qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]) ([]*telemetrytypes.FieldKeySelector, []string) {
 	var keySelectors []*telemetrytypes.FieldKeySelector
+	var warnings []string
 
 	for idx := range query.Aggregations {
 		aggExpr := query.Aggregations[idx]
@@ -136,7 +148,19 @@ func getKeySelectors(query qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]) []
 		keySelectors[idx].SelectorMatchType = telemetrytypes.FieldSelectorMatchTypeExact
 	}
 
-	return keySelectors
+	// When the new JSON body experience is enabled, warn the user if they use the bare
+	// "body" key in the filter — queries on plain "body" default to body.message:string.
+	// TODO(Piyush): Setup better for coming FTS support.
+	if querybuilder.BodyJSONQueryEnabled {
+		for _, sel := range keySelectors {
+			if sel.Name == LogsV2BodyColumn {
+				warnings = append(warnings, bodySearchDefaultWarning)
+				break
+			}
+		}
+	}
+
+	return keySelectors, warnings
 }
 
 func (b *logQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, query qbtypes.QueryBuilderQuery[qbtypes.LogAggregation], requestType qbtypes.RequestType) qbtypes.QueryBuilderQuery[qbtypes.LogAggregation] {
@@ -203,7 +227,6 @@ func (b *logQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[stri
 }
 
 func (b *logQueryStatementBuilder) adjustKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
-
 	// First check if it matches with any intrinsic fields
 	var intrinsicOrCalculatedField telemetrytypes.TelemetryFieldKey
 	if _, ok := IntrinsicFields[key.Name]; ok {
@@ -212,7 +235,6 @@ func (b *logQueryStatementBuilder) adjustKey(key *telemetrytypes.TelemetryFieldK
 	}
 
 	return querybuilder.AdjustKey(key, keys, nil)
-
 }
 
 // buildListQuery builds a query for list panel type
@@ -249,11 +271,7 @@ func (b *logQueryStatementBuilder) buildListQuery(
 		sb.SelectMore(LogsV2SeverityNumberColumn)
 		sb.SelectMore(LogsV2ScopeNameColumn)
 		sb.SelectMore(LogsV2ScopeVersionColumn)
-		sb.SelectMore(LogsV2BodyColumn)
-		if querybuilder.BodyJSONQueryEnabled {
-			sb.SelectMore(LogsV2BodyJSONColumn)
-			sb.SelectMore(LogsV2BodyPromotedColumn)
-		}
+		sb.SelectMore(bodyAliasExpression())
 		sb.SelectMore(LogsV2AttributesStringColumn)
 		sb.SelectMore(LogsV2AttributesNumberColumn)
 		sb.SelectMore(LogsV2AttributesBoolColumn)

pkg/telemetrylogs/stmt_builder_test.go

@@ -5,6 +5,7 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/querybuilder/resourcefilter"
@@ -886,3 +887,154 @@ func TestAdjustKey(t *testing.T) {
 		})
 	}
 }
+
+func TestStmtBuilderBodyField(t *testing.T) {
+	cases := []struct {
+		name                string
+		requestType         qbtypes.RequestType
+		query               qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]
+		enableBodyJSONQuery bool
+		expected            qbtypes.Statement
+		expectedErr         error
+	}{
+		{
+			name:        "body_exists",
+			requestType: qbtypes.RequestTypeRaw,
+			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
+				Signal: telemetrytypes.SignalLogs,
+				Filter: &qbtypes.Filter{Expression: "body Exists"},
+				Limit:  10,
+			},
+			enableBodyJSONQuery: true,
+			expected: qbtypes.Statement{
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body_v2 as body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND body_v2.message <> ? AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Args:     []any{uint64(1747945619), uint64(1747983448), "", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
+				Warnings: []string{bodySearchDefaultWarning},
+			},
+			expectedErr: nil,
+		},
+		{
+			name:        "body_exists_disabled",
+			requestType: qbtypes.RequestTypeRaw,
+			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
+				Signal: telemetrytypes.SignalLogs,
+				Filter: &qbtypes.Filter{Expression: "body Exists"},
+				Limit:  10,
+			},
+			enableBodyJSONQuery: false,
+			expected: qbtypes.Statement{
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND body <> ? AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Args:  []any{uint64(1747945619), uint64(1747983448), "", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
+			},
+			expectedErr: nil,
+		},
+		{
+			name:        "body_empty",
+			requestType: qbtypes.RequestTypeRaw,
+			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
+				Signal: telemetrytypes.SignalLogs,
+				Filter: &qbtypes.Filter{Expression: "body == ''"},
+				Limit:  10,
+			},
+			enableBodyJSONQuery: true,
+			expected: qbtypes.Statement{
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body_v2 as body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND body_v2.message = ? AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Args:     []any{uint64(1747945619), uint64(1747983448), "", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
+				Warnings: []string{bodySearchDefaultWarning},
+			},
+			expectedErr: nil,
+		},
+		{
+			name:        "body_empty_disabled",
+			requestType: qbtypes.RequestTypeRaw,
+			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
+				Signal: telemetrytypes.SignalLogs,
+				Filter: &qbtypes.Filter{Expression: "body == ''"},
+				Limit:  10,
+			},
+			enableBodyJSONQuery: false,
+			expected: qbtypes.Statement{
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND body = ? AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Args:  []any{uint64(1747945619), uint64(1747983448), "", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
+			},
+			expectedErr: nil,
+		},
+		{
+			name:        "body_contains",
+			requestType: qbtypes.RequestTypeRaw,
+			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
+				Signal: telemetrytypes.SignalLogs,
+				Filter: &qbtypes.Filter{Expression: "body CONTAINS 'error'"},
+				Limit:  10,
+			},
+			enableBodyJSONQuery: true,
+			expected: qbtypes.Statement{
+				Query:    "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body_v2 as body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND LOWER(body_v2.message) LIKE LOWER(?) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Args:     []any{uint64(1747945619), uint64(1747983448), "%error%", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
+				Warnings: []string{bodySearchDefaultWarning},
+			},
+			expectedErr: nil,
+		},
+		{
+			name:        "body_contains_disabled",
+			requestType: qbtypes.RequestTypeRaw,
+			query: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
+				Signal: telemetrytypes.SignalLogs,
+				Filter: &qbtypes.Filter{Expression: "body CONTAINS 'error'"},
+				Limit:  10,
+			},
+			enableBodyJSONQuery: false,
+			expected: qbtypes.Statement{
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource WHERE true AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp, id, trace_id, span_id, trace_flags, severity_text, severity_number, scope_name, scope_version, body, attributes_string, attributes_number, attributes_bool, resources_string, scope_string FROM signoz_logs.distributed_logs_v2 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND LOWER(body) LIKE LOWER(?) AND timestamp >= ? AND ts_bucket_start >= ? AND timestamp < ? AND ts_bucket_start <= ? LIMIT ?",
+				Args:  []any{uint64(1747945619), uint64(1747983448), "%error%", "1747947419000000000", uint64(1747945619), "1747983448000000000", uint64(1747983448), 10},
+			},
+			expectedErr: nil,
+		},
+	}
+
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+
+	enable, disable := jsonQueryTestUtil(t)
+	defer disable()
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			if c.enableBodyJSONQuery {
+				enable()
+			} else {
+				disable()
+			}
+			// build the key map after enabling/disabling body JSON query
+			mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+			mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+
+			aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil)
+			resourceFilterStmtBuilder := resourceFilterStmtBuilder()
+			statementBuilder := NewLogQueryStatementBuilder(
+				instrumentationtest.New().ToProviderSettings(),
+				mockMetadataStore,
+				fm,
+				cb,
+				resourceFilterStmtBuilder,
+				aggExprRewriter,
+				DefaultFullTextColumn,
+				GetBodyJSONKey,
+			)
+
+			q, err := statementBuilder.Build(context.Background(), 1747947419000, 1747983448000, c.requestType, c.query, nil)
+			if c.expectedErr != nil {
+				require.Error(t, err)
+				require.Contains(t, err.Error(), c.expectedErr.Error())
+			} else {
+				if err != nil {
+					_, _, _, _, _, add := errors.Unwrapb(err)
+					t.Logf("error additionals: %v", add)
+				}
+				require.NoError(t, err)
+				require.Equal(t, c.expected.Query, q.Query)
+				require.Equal(t, c.expected.Args, q.Args)
+				require.Equal(t, c.expected.Warnings, q.Warnings)
+			}
+		})
+	}
+}

pkg/telemetrylogs/test_data.go

@@ -27,13 +27,6 @@ func buildCompleteFieldKeyMap() map[string][]*telemetrytypes.TelemetryFieldKey {
 				FieldDataType: telemetrytypes.FieldDataTypeString,
 			},
 		},
-		"body": {
-			{
-				Name:          "body",
-				FieldContext:  telemetrytypes.FieldContextLog,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-			},
-		},
 		"http.status_code": {
 			{
 				Name:          "http.status_code",
@@ -945,6 +938,11 @@ func buildCompleteFieldKeyMap() map[string][]*telemetrytypes.TelemetryFieldKey {
 			key.Signal = telemetrytypes.SignalLogs
 		}
 	}
+
+	// add intrinsic fields to the map
+	for fieldName, key := range IntrinsicFields {
+		keysMap[fieldName] = append(keysMap[fieldName], &key)
+	}
 	return keysMap
 }
 

pkg/telemetrymetadata/body_json_metadata.go

@@ -319,7 +319,7 @@ func (t *telemetryMetaStore) ListJSONValues(ctx context.Context, path string, li
 	if promoted {
 		path = telemetrylogs.BodyPromotedColumnPrefix + path
 	} else {
-		path = telemetrylogs.BodyJSONColumnPrefix + path
+		path = telemetrylogs.BodyV2ColumnPrefix + path
 	}
 
 	from := fmt.Sprintf("%s.%s", telemetrylogs.DBName, telemetrylogs.LogsV2TableName)
@@ -522,7 +522,7 @@ func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...stri
 // TODO(Piyush): Remove this function
 func CleanPathPrefixes(path string) string {
 	path = strings.TrimPrefix(path, telemetrytypes.BodyJSONStringSearchPrefix)
-	path = strings.TrimPrefix(path, telemetrylogs.BodyJSONColumnPrefix)
+	path = strings.TrimPrefix(path, telemetrylogs.BodyV2ColumnPrefix)
 	path = strings.TrimPrefix(path, telemetrylogs.BodyPromotedColumnPrefix)
 	return path
 }

pkg/telemetrymetadata/metadata.go

@@ -102,7 +102,7 @@ func NewTelemetryMetaStore(
 		jsonColumnMetadata: map[telemetrytypes.Signal]map[telemetrytypes.FieldContext]telemetrytypes.JSONColumnMetadata{
 			telemetrytypes.SignalLogs: {
 				telemetrytypes.FieldContextBody: telemetrytypes.JSONColumnMetadata{
-					BaseColumn:     telemetrylogs.LogsV2BodyJSONColumn,
+					BaseColumn:     telemetrylogs.LogsV2BodyV2Column,
 					PromotedColumn: telemetrylogs.LogsV2BodyPromotedColumn,
 				},
 			},
@@ -351,7 +351,7 @@ func (t *telemetryMetaStore) logsTblStatementToFieldKeys(ctx context.Context) ([
 }
 
 // getLogsKeys returns the keys from the spans that match the field selection criteria
-func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors []*telemetrytypes.FieldKeySelector) ([]*telemetrytypes.TelemetryFieldKey, bool, error) {
+func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors []*telemetrytypes.FieldKeySelector) (map[string][]*telemetrytypes.TelemetryFieldKey, bool, error) {
 	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
 		instrumentationtypes.TelemetrySignal:  telemetrytypes.SignalLogs.StringValue(),
 		instrumentationtypes.CodeNamespace:    "metadata",
@@ -367,9 +367,10 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 	if err != nil {
 		return nil, false, err
 	}
-	mapOfKeys := make(map[string]*telemetrytypes.TelemetryFieldKey)
+	// setOfKeys to reuse the same key object for qualified names
+	setOfKeys := make(map[string]*telemetrytypes.TelemetryFieldKey)
 	for _, key := range matKeys {
-		mapOfKeys[key.Name+";"+key.FieldContext.StringValue()+";"+key.FieldDataType.StringValue()] = key
+		setOfKeys[key.Text()] = key
 	}
 
 	// queries for both attribute and resource keys tables
@@ -470,7 +471,7 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 
 	if len(queries) == 0 {
 		// No matching contexts, return empty result
-		return []*telemetrytypes.TelemetryFieldKey{}, true, nil
+		return nil, true, nil
 	}
 
 	// Combine queries with UNION ALL
@@ -498,7 +499,7 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 	}
 	defer rows.Close()
 
-	keys := []*telemetrytypes.TelemetryFieldKey{}
+	mapOfKeys := make(map[string][]*telemetrytypes.TelemetryFieldKey)
 	rowCount := 0
 	searchTexts := []string{}
 	dataTypes := []telemetrytypes.FieldDataType{}
@@ -526,7 +527,7 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 		if err != nil {
 			return nil, false, errors.Wrap(err, errors.TypeInternal, errors.CodeInternal, ErrFailedToGetLogsKeys.Error())
 		}
-		key, ok := mapOfKeys[name+";"+fieldContext.StringValue()+";"+fieldDataType.StringValue()]
+		key, ok := setOfKeys[name+";"+fieldContext.StringValue()+";"+fieldDataType.StringValue()]
 
 		// if there is no materialised column, create a key with the field context and data type
 		if !ok {
@@ -538,8 +539,8 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 			}
 		}
 
-		keys = append(keys, key)
-		mapOfKeys[name+";"+fieldContext.StringValue()+";"+fieldDataType.StringValue()] = key
+		mapOfKeys[key.Name] = append(mapOfKeys[key.Name], key)
+		setOfKeys[name+";"+fieldContext.StringValue()+";"+fieldDataType.StringValue()] = key
 	}
 
 	if rows.Err() != nil {
@@ -565,17 +566,13 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 
 		if found {
 			if field, exists := telemetrylogs.IntrinsicFields[key]; exists {
-				if _, added := mapOfKeys[field.Name+";"+field.FieldContext.StringValue()+";"+field.FieldDataType.StringValue()]; !added {
-					keys = append(keys, &field)
+				if _, added := setOfKeys[field.Name+";"+field.FieldContext.StringValue()+";"+field.FieldDataType.StringValue()]; !added {
+					mapOfKeys[field.Name] = append(mapOfKeys[field.Name], &field)
+					// intrinsic field can be a logical field mapped to a different physical location
+					mapOfKeys[key] = append(mapOfKeys[key], &field)
 				}
 				continue
 			}
-
-			keys = append(keys, &telemetrytypes.TelemetryFieldKey{
-				Name:         key,
-				FieldContext: telemetrytypes.FieldContextLog,
-				Signal:       telemetrytypes.SignalLogs,
-			})
 		}
 	}
 
@@ -584,10 +581,13 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 		if err != nil {
 			t.logger.ErrorContext(ctx, "failed to extract body JSON paths", "error", err)
 		}
-		keys = append(keys, bodyJSONPaths...)
+		for _, key := range bodyJSONPaths {
+			mapOfKeys[key.Name] = append(mapOfKeys[key.Name], key)
+		}
 		complete = complete && finished
 	}
-	return keys, complete, nil
+
+	return mapOfKeys, complete, nil
 }
 
 func getPriorityForContext(ctx telemetrytypes.FieldContext) int {
@@ -882,12 +882,20 @@ func (t *telemetryMetaStore) GetKeys(ctx context.Context, fieldKeySelector *tele
 	if fieldKeySelector != nil {
 		selectors = []*telemetrytypes.FieldKeySelector{fieldKeySelector}
 	}
+	mapOfKeys := make(map[string][]*telemetrytypes.TelemetryFieldKey)
 
 	switch fieldKeySelector.Signal {
 	case telemetrytypes.SignalTraces:
 		keys, complete, err = t.getTracesKeys(ctx, selectors)
 	case telemetrytypes.SignalLogs:
-		keys, complete, err = t.getLogsKeys(ctx, selectors)
+		mapOfLogKeys, logsComplete, err := t.getLogsKeys(ctx, selectors)
+		if err != nil {
+			return nil, false, err
+		}
+		for keyName, keys := range mapOfLogKeys {
+			mapOfKeys[keyName] = append(mapOfKeys[keyName], keys...)
+		}
+		complete = complete && logsComplete
 	case telemetrytypes.SignalMetrics:
 		if fieldKeySelector.Source == telemetrytypes.SourceMeter {
 			keys, complete, err = t.getMeterSourceMetricKeys(ctx, selectors)
@@ -903,12 +911,13 @@ func (t *telemetryMetaStore) GetKeys(ctx context.Context, fieldKeySelector *tele
 		keys = append(keys, tracesKeys...)
 
 		// get logs keys
-		logsKeys, logsComplete, err := t.getLogsKeys(ctx, selectors)
+		mapOfLogKeys, logsComplete, err := t.getLogsKeys(ctx, selectors)
 		if err != nil {
 			return nil, false, err
 		}
-		keys = append(keys, logsKeys...)
-
+		for keyName, keys := range mapOfLogKeys {
+			mapOfKeys[keyName] = append(mapOfKeys[keyName], keys...)
+		}
 		// get metrics keys
 		metricsKeys, metricsComplete, err := t.getMetricsKeys(ctx, selectors)
 		if err != nil {
@@ -922,7 +931,6 @@ func (t *telemetryMetaStore) GetKeys(ctx context.Context, fieldKeySelector *tele
 		return nil, false, err
 	}
 
-	mapOfKeys := make(map[string][]*telemetrytypes.TelemetryFieldKey)
 	for _, key := range keys {
 		mapOfKeys[key.Name] = append(mapOfKeys[key.Name], key)
 	}
@@ -959,7 +967,7 @@ func (t *telemetryMetaStore) GetKeysMulti(ctx context.Context, fieldKeySelectors
 		}
 	}
 
-	logsKeys, logsComplete, err := t.getLogsKeys(ctx, logsSelectors)
+	mapOfLogKeys, logsComplete, err := t.getLogsKeys(ctx, logsSelectors)
 	if err != nil {
 		return nil, false, err
 	}
@@ -980,8 +988,8 @@ func (t *telemetryMetaStore) GetKeysMulti(ctx context.Context, fieldKeySelectors
 	complete := logsComplete && tracesComplete && metricsComplete
 
 	mapOfKeys := make(map[string][]*telemetrytypes.TelemetryFieldKey)
-	for _, key := range logsKeys {
-		mapOfKeys[key.Name] = append(mapOfKeys[key.Name], key)
+	for keyName, keys := range mapOfLogKeys {
+		mapOfKeys[keyName] = append(mapOfKeys[keyName], keys...)
 	}
 	for _, key := range tracesKeys {
 		mapOfKeys[key.Name] = append(mapOfKeys[key.Name], key)

pkg/types/telemetrytypes/field_datatype.go

@@ -21,6 +21,7 @@ var (
 	// int64 and number are synonyms for float64
 	FieldDataTypeInt64       = FieldDataType{valuer.NewString("int64")}
 	FieldDataTypeNumber      = FieldDataType{valuer.NewString("number")}
+	FieldDataTypeJSON        = FieldDataType{valuer.NewString("json")}
 	FieldDataTypeUnspecified = FieldDataType{valuer.NewString("")}
 
 	FieldDataTypeArrayString  = FieldDataType{valuer.NewString("[]string")}

pkg/types/telemetrytypes/json_access_plan.go

@@ -40,7 +40,7 @@ type JSONAccessNode struct {
 	// Node information
 	Name       string
 	IsTerminal bool
-	isRoot     bool // marked true for only body_json and body_json_promoted
+	isRoot     bool // marked true for only body_v2 and body_promoted
 
 	// Precomputed type information (single source of truth)
 	AvailableTypes []JSONDataType

pkg/types/telemetrytypes/json_access_plan_test.go

@@ -1,12 +1,19 @@
 package telemetrytypes
 
 import (
+	"fmt"
 	"testing"
 
+	otelconstants "github.com/SigNoz/signoz-otel-collector/constants"
 	"github.com/stretchr/testify/require"
 	"gopkg.in/yaml.v3"
 )
 
+const (
+	bodyV2Column       = otelconstants.BodyV2Column
+	bodyPromotedColumn = otelconstants.BodyPromotedColumn
+)
+
 // ============================================================================
 // Helper Functions for Test Data Creation
 // ============================================================================
@@ -109,8 +116,8 @@ func TestNode_Alias(t *testing.T) {
 	}{
 		{
 			name:     "Root node returns name as-is",
-			node:     NewRootJSONAccessNode("body_json", 32, 0),
-			expected: "body_json",
+			node:     NewRootJSONAccessNode(bodyV2Column, 32, 0),
+			expected: bodyV2Column,
 		},
 		{
 			name: "Node without parent returns backticked name",
@@ -124,9 +131,9 @@ func TestNode_Alias(t *testing.T) {
 			name: "Node with root parent uses dot separator",
 			node: &JSONAccessNode{
 				Name:   "age",
-				Parent: NewRootJSONAccessNode("body_json", 32, 0),
+				Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 			},
-			expected: "`" + "body_json" + ".age`",
+			expected: "`" + bodyV2Column + ".age`",
 		},
 		{
 			name: "Node with non-root parent uses array separator",
@@ -134,10 +141,10 @@ func TestNode_Alias(t *testing.T) {
 				Name: "name",
 				Parent: &JSONAccessNode{
 					Name:   "education",
-					Parent: NewRootJSONAccessNode("body_json", 32, 0),
+					Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 				},
 			},
-			expected: "`" + "body_json" + ".education[].name`",
+			expected: "`" + bodyV2Column + ".education[].name`",
 		},
 		{
 			name: "Nested array path with multiple levels",
@@ -147,11 +154,11 @@ func TestNode_Alias(t *testing.T) {
 					Name: "awards",
 					Parent: &JSONAccessNode{
 						Name:   "education",
-						Parent: NewRootJSONAccessNode("body_json", 32, 0),
+						Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 					},
 				},
 			},
-			expected: "`" + "body_json" + ".education[].awards[].type`",
+			expected: "`" + bodyV2Column + ".education[].awards[].type`",
 		},
 	}
 
@@ -173,18 +180,18 @@ func TestNode_FieldPath(t *testing.T) {
 			name: "Simple field path from root",
 			node: &JSONAccessNode{
 				Name:   "user",
-				Parent: NewRootJSONAccessNode("body_json", 32, 0),
+				Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 			},
 			// FieldPath() always wraps the field name in backticks
-			expected: "body_json" + ".`user`",
+			expected: bodyV2Column + ".`user`",
 		},
 		{
 			name: "Field path with backtick-required key",
 			node: &JSONAccessNode{
 				Name:   "user-name", // requires backtick
-				Parent: NewRootJSONAccessNode("body_json", 32, 0),
+				Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 			},
-			expected: "body_json" + ".`user-name`",
+			expected: bodyV2Column + ".`user-name`",
 		},
 		{
 			name: "Nested field path",
@@ -192,11 +199,11 @@ func TestNode_FieldPath(t *testing.T) {
 				Name: "age",
 				Parent: &JSONAccessNode{
 					Name:   "user",
-					Parent: NewRootJSONAccessNode("body_json", 32, 0),
+					Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 				},
 			},
 			// FieldPath() always wraps the field name in backticks
-			expected: "`" + "body_json" + ".user`.`age`",
+			expected: "`" + bodyV2Column + ".user`.`age`",
 		},
 		{
 			name: "Array element field path",
@@ -204,11 +211,11 @@ func TestNode_FieldPath(t *testing.T) {
 				Name: "name",
 				Parent: &JSONAccessNode{
 					Name:   "education",
-					Parent: NewRootJSONAccessNode("body_json", 32, 0),
+					Parent: NewRootJSONAccessNode(bodyV2Column, 32, 0),
 				},
 			},
 			// FieldPath() always wraps the field name in backticks
-			expected: "`" + "body_json" + ".education`.`name`",
+			expected: "`" + bodyV2Column + ".education`.`name`",
 		},
 	}
 
@@ -236,36 +243,36 @@ func TestPlanJSON_BasicStructure(t *testing.T) {
 		{
 			name: "Simple path not promoted",
 			key:  makeKey("user.name", String, false),
-			expectedYAML: `
+			expectedYAML: fmt.Sprintf(`
 - name: user.name
-  column: body_json
+  column: %s
   availableTypes:
     - String
   maxDynamicTypes: 16
   isTerminal: true
   elemType: String
-`,
+`, bodyV2Column),
 		},
 		{
 			name: "Simple path promoted",
 			key:  makeKey("user.name", String, true),
-			expectedYAML: `
+			expectedYAML: fmt.Sprintf(`
 - name: user.name
-  column: body_json
+  column: %s
   availableTypes:
     - String
   maxDynamicTypes: 16
   isTerminal: true
   elemType: String
 - name: user.name
-  column: body_json_promoted
+  column: %s
   availableTypes:
     - String
   maxDynamicTypes: 16
   maxDynamicPaths: 256
   isTerminal: true
   elemType: String
-`,
+`, bodyV2Column, bodyPromotedColumn),
 		},
 		{
 			name:         "Empty path returns error",
@@ -278,8 +285,8 @@ func TestPlanJSON_BasicStructure(t *testing.T) {
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			err := tt.key.SetJSONAccessPlan(JSONColumnMetadata{
-				BaseColumn:     "body_json",
-				PromotedColumn: "body_json_promoted",
+				BaseColumn:     bodyV2Column,
+				PromotedColumn: bodyPromotedColumn,
 			}, types)
 			if tt.expectErr {
 				require.Error(t, err)
@@ -304,9 +311,9 @@ func TestPlanJSON_ArrayPaths(t *testing.T) {
 		{
 			name: "Single array level - JSON branch only",
 			path: "education[].name",
-			expectedYAML: `
+			expectedYAML: fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -318,14 +325,14 @@ func TestPlanJSON_ArrayPaths(t *testing.T) {
       maxDynamicTypes: 8
       isTerminal: true
       elemType: String
-`,
+`, bodyV2Column),
 		},
 		{
 			name: "Single array level - both JSON and Dynamic branches",
 			path: "education[].awards[].type",
-			expectedYAML: `
+			expectedYAML: fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -352,14 +359,14 @@ func TestPlanJSON_ArrayPaths(t *testing.T) {
           maxDynamicPaths: 256
           isTerminal: true
           elemType: String
-`,
+`, bodyV2Column),
 		},
 		{
 			name: "Deeply nested array path",
 			path: "interests[].entities[].reviews[].entries[].metadata[].positions[].name",
-			expectedYAML: `
+			expectedYAML: fmt.Sprintf(`
 - name: interests
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -399,14 +406,14 @@ func TestPlanJSON_ArrayPaths(t *testing.T) {
                             - String
                           isTerminal: true
                           elemType: String
-`,
+`, bodyV2Column),
 		},
 		{
 			name: "ArrayAnyIndex replacement [*] to []",
 			path: "education[*].name",
-			expectedYAML: `
+			expectedYAML: fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -418,7 +425,7 @@ func TestPlanJSON_ArrayPaths(t *testing.T) {
       maxDynamicTypes: 8
       isTerminal: true
       elemType: String
-`,
+`, bodyV2Column),
 		},
 	}
 
@@ -426,8 +433,8 @@ func TestPlanJSON_ArrayPaths(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			key := makeKey(tt.path, String, false)
 			err := key.SetJSONAccessPlan(JSONColumnMetadata{
-				BaseColumn:     "body_json",
-				PromotedColumn: "body_json_promoted",
+				BaseColumn:     bodyV2Column,
+				PromotedColumn: bodyPromotedColumn,
 			}, types)
 			require.NoError(t, err)
 			require.NotNil(t, key.JSONPlan)
@@ -445,15 +452,15 @@ func TestPlanJSON_PromotedVsNonPromoted(t *testing.T) {
 	t.Run("Non-promoted plan", func(t *testing.T) {
 		key := makeKey(path, String, false)
 		err := key.SetJSONAccessPlan(JSONColumnMetadata{
-			BaseColumn:     "body_json",
-			PromotedColumn: "body_json_promoted",
+			BaseColumn:     bodyV2Column,
+			PromotedColumn: bodyPromotedColumn,
 		}, types)
 		require.NoError(t, err)
 		require.Len(t, key.JSONPlan, 1)
 
-		expectedYAML := `
+		expectedYAML := fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -480,7 +487,7 @@ func TestPlanJSON_PromotedVsNonPromoted(t *testing.T) {
           maxDynamicPaths: 256
           isTerminal: true
           elemType: String
-`
+`, bodyV2Column)
 		got := plansToYAML(t, key.JSONPlan)
 		require.YAMLEq(t, expectedYAML, got)
 	})
@@ -488,15 +495,15 @@ func TestPlanJSON_PromotedVsNonPromoted(t *testing.T) {
 	t.Run("Promoted plan", func(t *testing.T) {
 		key := makeKey(path, String, true)
 		err := key.SetJSONAccessPlan(JSONColumnMetadata{
-			BaseColumn:     "body_json",
-			PromotedColumn: "body_json_promoted",
+			BaseColumn:     bodyV2Column,
+			PromotedColumn: bodyPromotedColumn,
 		}, types)
 		require.NoError(t, err)
 		require.Len(t, key.JSONPlan, 2)
 
-		expectedYAML := `
+		expectedYAML := fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -524,7 +531,7 @@ func TestPlanJSON_PromotedVsNonPromoted(t *testing.T) {
           isTerminal: true
           elemType: String
 - name: education
-  column: body_json_promoted
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -554,7 +561,7 @@ func TestPlanJSON_PromotedVsNonPromoted(t *testing.T) {
           maxDynamicPaths: 256
           isTerminal: true
           elemType: String
-`
+`, bodyV2Column, bodyPromotedColumn)
 		got := plansToYAML(t, key.JSONPlan)
 		require.YAMLEq(t, expectedYAML, got)
 	})
@@ -575,11 +582,11 @@ func TestPlanJSON_EdgeCases(t *testing.T) {
 			expectErr: true,
 		},
 		{
-			name:  "Very deep nesting - validates progression doesn't go negative",
-			path:  "interests[].entities[].reviews[].entries[].metadata[].positions[].name",
-			expectedYAML: `
+			name: "Very deep nesting - validates progression doesn't go negative",
+			path: "interests[].entities[].reviews[].entries[].metadata[].positions[].name",
+			expectedYAML: fmt.Sprintf(`
 - name: interests
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -619,14 +626,14 @@ func TestPlanJSON_EdgeCases(t *testing.T) {
                             - String
                           isTerminal: true
                           elemType: String
-`,
+`, bodyV2Column),
 		},
 		{
-			name:  "Path with mixed scalar and array types",
-			path:  "education[].type",
-			expectedYAML: `
+			name: "Path with mixed scalar and array types",
+			path: "education[].type",
+			expectedYAML: fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -639,20 +646,20 @@ func TestPlanJSON_EdgeCases(t *testing.T) {
       maxDynamicTypes: 8
       isTerminal: true
       elemType: String
-`,
+`, bodyV2Column),
 		},
 		{
-			name:  "Exists with only array types available",
-			path:  "education",
-			expectedYAML: `
+			name: "Exists with only array types available",
+			path: "education",
+			expectedYAML: fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
   isTerminal: true
   elemType: Array(JSON)
-`,
+`, bodyV2Column),
 		},
 	}
 
@@ -668,8 +675,8 @@ func TestPlanJSON_EdgeCases(t *testing.T) {
 			}
 			key := makeKey(tt.path, keyType, false)
 			err := key.SetJSONAccessPlan(JSONColumnMetadata{
-				BaseColumn:     "body_json",
-				PromotedColumn: "body_json_promoted",
+				BaseColumn:     bodyV2Column,
+				PromotedColumn: bodyPromotedColumn,
 			}, types)
 			if tt.expectErr {
 				require.Error(t, err)
@@ -687,15 +694,15 @@ func TestPlanJSON_TreeStructure(t *testing.T) {
 	path := "education[].awards[].participated[].team[].branch"
 	key := makeKey(path, String, false)
 	err := key.SetJSONAccessPlan(JSONColumnMetadata{
-		BaseColumn:     "body_json",
-		PromotedColumn: "body_json_promoted",
+		BaseColumn:     bodyV2Column,
+		PromotedColumn: bodyPromotedColumn,
 	}, types)
 	require.NoError(t, err)
 	require.Len(t, key.JSONPlan, 1)
 
-	expectedYAML := `
+	expectedYAML := fmt.Sprintf(`
 - name: education
-  column: body_json
+  column: %s
   availableTypes:
     - Array(JSON)
   maxDynamicTypes: 16
@@ -780,7 +787,7 @@ func TestPlanJSON_TreeStructure(t *testing.T) {
                   maxDynamicPaths: 64
                   isTerminal: true
                   elemType: String
-`
+`, bodyV2Column)
 
 	got := plansToYAML(t, key.JSONPlan)
 	require.YAMLEq(t, expectedYAML, got)

pkg/types/telemetrytypes/telemetrytypestest/metadata_store.go

@@ -2,6 +2,7 @@ package telemetrytypestest
 
 import (
 	"context"
+	"slices"
 	"strings"
 
 	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
@@ -178,8 +179,9 @@ func matchesKey(selector *telemetrytypes.FieldKeySelector, key *telemetrytypes.T
 		return true
 	}
 
+	matchNameExceptions := []string{"body"}
 	// Check name (already checked in matchesName, but double-check here)
-	if selector.Name != "" && !matchesName(selector, key.Name) {
+	if selector.Name != "" && !matchesName(selector, key.Name) && slices.Contains(matchNameExceptions, key.Name) {
 		return false
 	}