refactor(dashboard): rename scatter click helper and type legend series mocks

Panel kinds declare which builder fields to keep equal across queries. A query
added or switched to another signal takes the others' values, since a signal
switch reloads its own.

.claude/rules/storybook.md

@@ -1,15 +0,0 @@
----
-paths:
-  - "frontend/src/**/*.tsx"
----
-
-# Storybook
-
-Page stories are written with the `signoz-page-story` skill ([`.claude/skills/signoz-page-story/SKILL.md`](../skills/signoz-page-story/SKILL.md)); the API surface is [`frontend/src/storybook/README.md`](../../frontend/src/storybook/README.md).
-
-- **A UI change lands with its story.** Any change that alters what a page renders — a new page, a new state, a new branch, a changed layout — updates the story of every page that renders it, or creates one where the page has none. Go through the `signoz-page-story` skill; never hand-write a page story outside it.
-- **New page, new story. New state, new control or variant.** The skill decides which: a control on a response, a variant worth linking to, or a `play` story for a state only a click reaches.
-- **A shared component is covered through its pages.** A change under `components/` or `container/` with no story of its own updates the stories of the pages that render it.
-- **Already covered, say so.** When the existing story and its controls already reach the changed state, no story edit is needed; state that in the PR description.
-- **Opt out only when there is no visual diff.** Skip stories only when the change renders nothing differently: types, api clients, hooks with no UI branch, tests. Deleting a page deletes its stories.
-- **Prove it with a visual diff when asked.** Before/after screenshots and "did this touch other screens" go through `sbshot-visual-diff`, which can only show what a story renders.

.claude/skills/sbshot-visual-diff/SKILL.md

@@ -5,9 +5,15 @@ description: Shoot Storybook stories with sbshot at two git refs and produce a d
 
 # sbshot visual diffs
 
-`npx -y github:SigNoz/sbshot` shoots Storybook stories and pixel-diffs two runs. Use it. Do not hand-roll a Playwright screenshot loop or a canvas pixel-compare: sbshot already handles story selection, themes, settling, retries, diffing, tagging, a viewer and a static export, and its runs are the format the rest of the team can open.
+`npx -y github:SigNoz/sbshot` shoots Storybook stories and pixel-diffs two runs.
+Use it. Do not hand-roll a Playwright screenshot loop or a canvas pixel-compare:
+sbshot already handles story selection, themes, settling, retries, diffing,
+tagging, a viewer and a static export, and its runs are the format the rest of
+the team can open.
 
-sbshot is not installed by any package. It is run through `npx`, so nothing it knows travels into this repo on its own. This file is where that knowledge lives.
+sbshot is not installed by any package. It is run through `npx`, so nothing it
+knows travels into this repo on its own. This file is where that knowledge
+lives.
 
 ## The shape of a run
 
@@ -18,31 +24,58 @@ tag <diff> <tag> <story-id>...           # what the reviewer should look at
 export <diff> --out <dir>                # a static site, hostable
 ```
 
-`<storybook>` is a running dev server (`http://localhost:6006`), a build directory holding `index.json`, or a project directory with `.storybook/`. The frontend has **no `build-storybook` script**, only `storybook dev -p 6006`, so point `capture` at a dev server.
+`<storybook>` is a running dev server (`http://localhost:6006`), a build
+directory holding `index.json`, or a project directory with `.storybook/`. The
+frontend has **no `build-storybook` script**, only `storybook dev -p 6006`, so
+point `capture` at a dev server.
 
 ## Cover the change with stories first
 
-**A diff can only show what a story renders.** A screen, state or variant with no story is invisible to sbshot: it produces no pair, so it reads as "nothing changed" rather than "never looked at". This is the failure mode that makes a clean-looking diff worthless.
+**A diff can only show what a story renders.** A screen, state or variant with no
+story is invisible to sbshot: it produces no pair, so it reads as "nothing
+changed" rather than "never looked at". This is the failure mode that makes a
+clean-looking diff worthless.
 
-Before capturing, list the screens and states the change touches and check each has a story. For anything missing, write it first — the `signoz-page-story` skill covers how. New states reached only by an interaction need a `play` function, or the capture shoots the page at rest and the state never appears.
+Before capturing, list the screens and states the change touches and check each
+has a story. For anything missing, write it first — the `signoz-page-story`
+skill covers how. New states reached only by an interaction need a `play`
+function, or the capture shoots the page at rest and the state never appears.
 
-Then confirm it worked: the two runs' story counts should differ by exactly the stories the change adds. A new screen that produced no new story id is a screen nobody is reviewing. Say the count in the summary, so a reader can tell coverage from silence.
+Then confirm it worked: the two runs' story counts should differ by exactly the
+stories the change adds. A new screen that produced no new story id is a screen
+nobody is reviewing. Say the count in the summary, so a reader can tell coverage
+from silence.
 
 ## Rules that are not optional
 
-**One freshly started Storybook per ref.** Never start one server and switch git branches under it. Vite's HMR reloads the page, but some modules do not re-initialise, so the shot differs silently from a clean boot and the difference looks like a real change. Settle time does not fix this and is not the variable. Use one worktree and one port per ref, and stop each server before the next.
+**One freshly started Storybook per ref.** Never start one server and switch git
+branches under it. Vite's HMR reloads the page, but some modules do not
+re-initialise, so the shot differs silently from a clean boot and the difference
+looks like a real change. Settle time does not fix this and is not the variable.
+Use one worktree and one port per ref, and stop each server before the next.
 
-**Capture both themes: `--theme dark,light`.** Without it sbshot shoots the story's own default and everything lands in a single `default/` folder, so every regression in the other theme is invisible. Themes double the shot count, so scope with `--stories` or `--title`, never by dropping a theme.
+**Capture both themes: `--theme dark,light`.** Without it sbshot shoots the
+story's own default and everything lands in a single `default/` folder, so every
+regression in the other theme is invisible. Themes double the shot count, so
+scope with `--stories` or `--title`, never by dropping a theme.
 
-**Baseline is the merge-base, not `origin/main`.** `git merge-base origin/main <branch>`. Against a moved main, every commit main gained since the branch's base shows up reversed, as though the branch reverted it.
+**Baseline is the merge-base, not `origin/main`.** `git merge-base origin/main
+<branch>`. Against a moved main, every commit main gained since the branch's base
+shows up reversed, as though the branch reverted it.
 
-**The percentage sorts the list, it does not tell you what matters.** A dialog that dims the page scores high for a one-line change, and a whole new form section can score low. Open the shots and say what changed on each screen. The biggest number is usually the least interesting one.
+**The percentage sorts the list, it does not tell you what matters.** A dialog
+that dims the page scores high for a one-line change, and a whole new form
+section can score low. Open the shots and say what changed on each screen. The
+biggest number is usually the least interesting one.
 
-**If you cannot explain a pair, assume the capture is at fault, not the code.** Open it, crop both sides and compare them before calling it noise. A pixel count and a good guess are not evidence.
+**If you cannot explain a pair, assume the capture is at fault, not the code.**
+Open it, crop both sides and compare them before calling it noise. A pixel count
+and a good guess are not evidence.
 
 ## Noise, and the floor that proves it
 
-The same story does not always render identically twice. Pairs often move for reasons that have nothing to do with the change:
+The same story does not always render identically twice. Pairs often move for
+reasons that have nothing to do with the change:
 
 - a focus ring left on whatever a `play` function clicked last
 - a scrollbar appearing, or its thumb resting a few pixels off
@@ -53,7 +86,9 @@ The same story does not always render identically twice. Pairs often move for re
 - hover or active styling from where the pointer happened to rest
 - a late-loading font or image shifting a line of text
 
-Do not argue about these one at a time. **Measure them**: shoot the same commit twice and diff those two runs against each other. Anything that moves there moved for no reason, so it is noise.
+Do not argue about these one at a time. **Measure them**: shoot the same commit
+twice and diff those two runs against each other. Anything that moves there moved
+for no reason, so it is noise.
 
 ```
 capture <storybook> --name-run noise-a
@@ -62,35 +97,60 @@ diff noise-a noise-b --name-diff noise
 diff <baseline> <after> --noise noise      # marks the movers flaky
 ```
 
-**The noise run has to cover the same stories as the real diff.** Do not scope it down to the few pairs that moved, however tempting that is. `--noise` marks a pair flaky when the noise diff does not show it as unchanged, so every story the noise run leaves out is marked flaky too, including the new screens the reviewer is there to look at. Shooting two narrow runs and diffing those against each other has the same problem. Either shoot the full set twice, or skip `--noise` and explain the few movers by hand.
+**The noise run has to cover the same stories as the real diff.** Do not scope it
+down to the few pairs that moved, however tempting that is. `--noise` marks a
+pair flaky when the noise diff does not show it as unchanged, so every story the
+noise run leaves out is marked flaky too, including the new screens the reviewer
+is there to look at. Shooting two narrow runs and diffing those against each
+other has the same problem. Either shoot the full set twice, or skip `--noise`
+and explain the few movers by hand.
 
-**`--noise` ignores how far a pair moved.** A pair is marked flaky when the noise diff does not show it as unchanged, so a 70-pixel flicker in the noise run hides a real 8% change in the real one. Compare the two numbers before trusting the mark. When most of the flaky marks are hiding real changes, run the diff without `--noise` and tag the genuinely noisy pairs by hand instead, so nothing real is filtered out of the reviewer's view.
+That is the trade: a second full capture costs about as long as the first, so on
+a small diff it is often quicker to crop the two or three movers and say what
+each one is. Use `--noise` when the diff is large, or when wiring `--fail-over`
+into CI, where something has to decide without a person looking.
 
-That is the trade: a second full capture costs about as long as the first, so on a small diff it is often quicker to crop the two or three movers and say what each one is. Use `--noise` when the diff is large, or when wiring `--fail-over` into CI, where something has to decide without a person looking.
-
-If a pair is flaky every run and the state it captures matters, fix the story rather than living with it: blur what the `play` clicked, freeze the clock, or assert the state instead of shooting it.
+If a pair is flaky every run and the state it captures matters, fix the story
+rather than living with it: blur what the `play` clicked, freeze the clock, or
+assert the state instead of shooting it.
 
 ## Making it readable for a reviewer
 
 A reviewer cannot open `localhost`, so `sbshot ui` is for you, not for them.
 
-1. `tag` the pairs that matter, with `--note` saying why. The viewer filters by tag, so the reviewer lands on the real changes instead of scrolling past noise that scored higher.
-2. `export <diff> --out <dir>`. It writes a static site carrying only the pairs that are not identical, converted to WebP, so a large diff stays small.
-3. Host it. A Claude artifact works: publish the export's files and give the reviewer the link. `index.html` is reserved for the artifact's own page, so publish sbshot's entry as `viewer.html` and link to `viewer.html#/job/diff/<diff>`.
+1. `tag` the pairs that matter, with `--note` saying why. The viewer filters by
+   tag, so the reviewer lands on the real changes instead of scrolling past
+   noise that scored higher.
+2. `export <diff> --out <dir>`. It writes a static site carrying only the pairs
+   that are not identical, converted to WebP, so a large diff stays small.
+3. Host it. A Claude artifact works: publish the export's files and give the
+   reviewer the link. `index.html` is reserved for the artifact's own page, so
+   publish sbshot's entry as `viewer.html` and link to
+   `viewer.html#/job/diff/<diff>`.
 4. Put the link in the PR body under **Screenshots / Screen Recordings**.
 
-Say the numbers plainly: how many screens changed, how many are new, how many are pixel-identical, how many are flaky. The count of unchanged screens is often the most useful claim in the diff, because it is the one a reviewer cannot check by eye.
+Say the numbers plainly: how many screens changed, how many are new, how many are
+pixel-identical, how many are flaky. The count of unchanged screens is often the
+most useful claim in the diff, because it is the one a reviewer cannot check by
+eye.
 
 ## Operational traps
 
-- A full capture is hundreds of shots. Scope with `--title "Pages/Alerts"` or `--stories "a,b,c"` (substring match on id or Title/Name, repeatable).
-- **On macOS a capture can pin itself to one story at a time.** sbshot picks how many to shoot at once by sampling free memory, and off Linux it reads `os.freemem()`, which counts only truly free pages. macOS parks almost everything in "inactive" instead, which is reclaimable on demand, so the sampler can read ~100 MB on a 25 GB machine and shrink to one forever. `--jobs` does not help: it is only an upper cap. Check `parallelism` in `<run>/events.ndjson`; if it sits at 1 while `vm_stat` shows gigabytes inactive, that is this. A 124-shot run takes about 90 minutes pinned and about 6 minutes at four at a time, so it is worth spotting before a long capture.
-- A fresh worktree cannot build Storybook: `i18n-translations-hash.json` is gitignored and generated. Run `node ./i18-generate-hash.cjs` in `<worktree>/frontend`, and symlink `node_modules` from the main checkout.
-- `pnpm test:storybook` starts its own server on 6006 and hangs silently if something already holds that port. Free it first.
-- ImageMagick on macOS may have no default font, so `--mode green-parallel` fails with ``unable to read font `' ``. Map Helvetica to a real file in `~/.config/ImageMagick/type.xml`.
-- `sbshot link <dir> <name>` adds a run from elsewhere into the workspace, but it symlinks. Keep the source directory alive until you have exported.
+- A full capture is hundreds of shots. Scope with `--title "Pages/Alerts"` or
+  `--stories "a,b,c"` (substring match on id or Title/Name, repeatable).
+- A fresh worktree cannot build Storybook: `i18n-translations-hash.json` is
+  gitignored and generated. Run `node ./i18-generate-hash.cjs` in
+  `<worktree>/frontend`, and symlink `node_modules` from the main checkout.
+- `pnpm test:storybook` starts its own server on 6006 and hangs silently if
+  something already holds that port. Free it first.
+- ImageMagick on macOS may have no default font, so `--mode green-parallel` fails
+  with ``unable to read font `' ``. Map Helvetica to a real file in
+  `~/.config/ImageMagick/type.xml`.
+- `sbshot link <dir> <name>` adds a run from elsewhere into the workspace, but it
+  symlinks. Keep the source directory alive until you have exported.
 - The export directory is build output. Delete it when done, or gitignore it.
-- Running the whole Storybook test suite locally fails broadly with `page.goto: Timeout` from resource starvation. Scope it; CI is the real signal.
+- Running the whole Storybook test suite locally fails broadly with
+  `page.goto: Timeout` from resource starvation. Scope it; CI is the real signal.
 
 ## Done means
 

.claude/skills/signoz-page-story/SKILL.md

@@ -5,35 +5,63 @@ description: Explore a SigNoz page, map the endpoints, states and query params i
 
 # SigNoz page stories
 
-A page story renders the real page inside the real app shell against msw, and its controls panel can reach every state the page has. The panel is the deliverable, not the story list.
+A page story renders the real page inside the real app shell against msw, and its
+controls panel can reach every state the page has. The panel is the deliverable,
+not the story list.
 
-`frontend/src/storybook/README.md` is the API surface (providers, parameters, control builders, module mocks, navigation). Read it first; this skill is the process on top of it.
+`frontend/src/storybook/README.md` is the API surface (providers, parameters,
+control builders, module mocks, navigation). Read it first; this skill is the
+process on top of it.
 
 ## Workflow
 
-1. **Map the page**: [references/discovery.md](references/discovery.md). Produce the inventory (endpoints, states, params, permissions, caps) before writing code. No inventory, no story.
-2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console names the endpoints step 1 missed.
+1. **Map the page**: [references/discovery.md](references/discovery.md). Produce
+   the inventory (endpoints, states, params, permissions, caps) before writing
+   code. No inventory, no story.
+2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console
+   names the endpoints step 1 missed.
 3. **Inventory to controls**: [references/controls.md](references/controls.md).
-4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's mocks module.
-5. **Verify in the browser**: [references/verify.md](references/verify.md). Never report the story as done without it.
+4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's
+   mocks module.
+5. **Verify in the browser**: [references/verify.md](references/verify.md). Never
+   report the story as done without it.
 
 ## Where it lands in the sidebar
 
-The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`), so a page sits where someone would click it in the product. Four things decide that, and all four are part of writing the story, not a follow-up.
+The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`), so
+a page sits where someone would click it in the product. Four things decide that,
+and all four are part of writing the story, not a follow-up.
 
-**Title.** `Pages/<Area>/<Page>`, where `<Area>` is the nav section and `<Page>` is the label the nav gives it.
+**Title.** `Pages/<Area>/<Page>`, where `<Area>` is the nav section and `<Page>`
+is the label the nav gives it.
 
-- The leaf is the product's label, never the component's name: `MetricsExplorer` is `Metrics/Explorer`, `MeterExplorer` is `Metering/Cost Meter`, `AIAssistantPage` is `Noz`.
+- The leaf is the product's label, never the component's name: `MetricsExplorer`
+  is `Metrics/Explorer`, `MeterExplorer` is `Metering/Cost Meter`,
+  `AIAssistantPage` is `Noz`.
 - Never repeat the area in the leaf: `Alerts/Rules`, not `Alerts/AlertRules`.
-- A leaf never shares its name with a sibling folder. The folder wins and the page becomes `List`, or `Overview` for a tab strip: `Services/List` beside `Services/Detail`.
+- A leaf never shares its name with a sibling folder. The folder wins and the
+  page becomes `List`, or `Overview` for a tab strip: `Services/List` beside
+  `Services/Detail`.
 - Title Case with spaces. No camelCase, no kebab.
-- Four levels is the floor to stay under: `Pages/Alerts/Channels/New` is as deep as it goes.
-- Pages nobody navigates to on purpose go under `Pages/System` (`Status`, `Unauthorized`, `Workspace Locked`), and the pre-session pages under `Pages/Auth`.
-- A page whose permission stories earn their own folder becomes one: `Pages/Settings/Billing/Overview` beside `Pages/Settings/Billing/Authz`. See **Permission stories** below.
+- Four levels is the floor to stay under: `Pages/Alerts/Channels/New` is as deep
+  as it goes.
+- Pages nobody navigates to on purpose go under `Pages/System` (`Status`,
+  `Unauthorized`, `Workspace Locked`), and the pre-session pages under
+  `Pages/Auth`.
+- A page whose permission stories earn their own folder becomes one:
+  `Pages/Settings/Billing/Overview` beside `Pages/Settings/Billing/Authz`. See
+  **Permission stories** below.
 
-**Order.** The `storySort.order` literal in `.storybook/preview.tsx` carries the order for every level. A new page in an existing area is appended to that area's array, in the order the product lists it; a new area goes where the side nav puts it. Storybook parses the order out of the file statically, so it has to stay an inline literal. Missing entries fall to the end of their level rather than disappearing, so a forgotten edit is a page at the bottom of its area, not a broken sidebar.
+**Order.** The `storySort.order` literal in `.storybook/preview.tsx` carries the
+order for every level. A new page in an existing area is appended to that area's
+array, in the order the product lists it; a new area goes where the side nav
+puts it. Storybook parses the order out of the file statically, so it has to
+stay an inline literal. Missing entries fall to the end of their level rather
+than disappearing, so a forgotten edit is a page at the bottom of its area, not
+a broken sidebar.
 
-**Tags.** Declared on the meta, right under `title`, and what the sidebar's tag filter answers questions with. Only these:
+**Tags.** Declared on the meta, right under `title`, and what the sidebar's tag
+filter answers questions with. Only these:
 
 | Tag | When |
 | --- | --- |
@@ -45,7 +73,8 @@ The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`),
 
 `autodocs` comes from `preview.tsx` and is never written on a meta.
 
-**Doc comment on the meta.** What the page is, in the page's own terms, then a blank line, then the route:
+**Doc comment on the meta.** What the page is, in the page's own terms, then a
+blank line, then the route:
 
 ```tsx
 const pageStory = storyMocks(logsExplorerMocks, {
@@ -68,33 +97,79 @@ const meta = {
 } satisfies Meta<LogsExplorerArgs>;
 ```
 
-The `pageStory` const and the trailing `parameters` line are what make the doc comment safe. The comment compiles to a `parameters` property that the csf plugin appends after the spread, so a meta that spreads `storyMocks(...)` and stops there loses `parameters.signoz` and renders the page against the global handlers alone: every one of the page's endpoints misses. Restating `parameters` as a literal gives the plugin something to merge into. `resolveStory` logs the combination that says it happened, so the console names it rather than leaving it to be found by reading the page.
+The `pageStory` const and the trailing `parameters` line are what make the doc
+comment safe. The comment compiles to a `parameters` property that the csf plugin
+appends after the spread, so a meta that spreads `storyMocks(...)` and stops
+there loses `parameters.signoz` and renders the page against the global handlers
+alone: every one of the page's endpoints misses. Restating `parameters` as a
+literal gives the plugin something to merge into. `resolveStory` logs the
+combination that says it happened, so the console names it rather than leaving it
+to be found by reading the page.
 
-It is the description on the page's Docs page, which is the only place a reader who is not in the code finds out what the page is for. Two or three sentences: what it shows, what drives it, and the gating worth knowing about (`Gated on authz permissions`, `follows the legacy editor role`). A control-driven route says so instead of a path: ``Route: `/metrics-explorer/*`, the tab control picks which``.
+It is the description on the page's Docs page, which is the only place a reader
+who is not in the code finds out what the page is for. Two or three sentences:
+what it shows, what drives it, and the gating worth knowing about (`Gated on
+authz permissions`, `follows the legacy editor role`). A control-driven route
+says so instead of a path: ``Route: `/metrics-explorer/*`, the tab control picks
+which``.
 
 ## Permission stories
 
-A page that gates UI on `lib/authz` keeps its permission states in a folder of their own, so the page's own file stays about the page and the sidebar answers "what does this permission do" in one place.
+A page that gates UI on `lib/authz` keeps its permission states in a folder of
+their own, so the page's own file stays about the page and the sidebar answers
+"what does this permission do" in one place.
 
-**Layout.** A second story file at `stories/authz/<Page>.authz.stories.tsx`, titled `Pages/<Area>/<Page>/Authz`, which turns the page into a folder: its own file is retitled `Pages/<Area>/<Page>/Overview`, and `.storybook/preview.tsx` gains the sub-order (`'Billing', ['Overview', 'Authz']`). Both files carry the `authz` tag and share the page's one mocks module, which the authz file imports as `../<Page>.stories.mocks`. It declares no controls and no mock data of its own: a permission story that needs a new response is a control the page's mocks were missing.
+**Layout.** A second story file at `stories/authz/<Page>.authz.stories.tsx`,
+titled `Pages/<Area>/<Page>/Authz`, which turns the page into a folder: its own
+file is retitled `Pages/<Area>/<Page>/Overview`, and `.storybook/preview.tsx`
+gains the sub-order (`'Billing', ['Overview', 'Authz']`). Both files carry the
+`authz` tag and share the page's one mocks module, which the authz file imports
+as `../<Page>.stories.mocks`. It declares no controls and no mock data of its
+own: a permission story that needs a new response is a control the page's mocks
+were missing.
 
-**One story per permission the page reads**, named for what is gone: `NoRead`, `NoList`, `NoUpdate`, `NoCreate`, `NoDelete`. Then the combinations the page itself distinguishes, and only those: `NoManage` where two permissions gate one button, `ReadOnly` where everything but reading is denied, `NoSubscriptionAccess` where none of the resource's permissions are held, and `CheckFailed` for `authzState: 'error'`, which is the page's fail-open path rather than a denial.
+**One story per permission the page reads**, named for what is gone: `NoRead`,
+`NoList`, `NoUpdate`, `NoCreate`, `NoDelete`. Then the combinations the page
+itself distinguishes, and only those: `NoManage` where two permissions gate one
+button, `ReadOnly` where everything but reading is denied, `NoSubscriptionAccess`
+where none of the resource's permissions are held, and `CheckFailed` for
+`authzState: 'error'`, which is the page's fail-open path rather than a denial.
 
-**Revoke, never allow-list.** Each story is a full grant minus what its name says: `args: { revoked: ['read:subscription'] }`. The `Revoked` control subtracts from the preset, so the story stays "an admin missing one permission" as the catalogue grows, and the diff against the page's `Default` is the one permission. Rebuilding the allow-list by hand drifts the moment a resource is added.
+**Revoke, never allow-list.** Each story is a full grant minus what its name
+says: `args: { revoked: ['read:subscription'] }`. The `Revoked` control subtracts
+from the preset, so the story stays "an admin missing one permission" as the
+catalogue grows, and the diff against the page's `Default` is the one permission.
+Rebuilding the allow-list by hand drifts the moment a resource is added.
 
-**Never a role preset in this folder.** `access: 'viewer'` moves the legacy role, the side nav and every other resource's permissions at the same time, so the story no longer shows what its name claims. A persona is a story on the page's own file, and only when the product has that persona.
+**Never a role preset in this folder.** `access: 'viewer'` moves the legacy role,
+the side nav and every other resource's permissions at the same time, so the
+story no longer shows what its name claims. A persona is a story on the page's
+own file, and only when the product has that persona.
 
-**Pair the revocation with the state that renders the gated control.** A button that only exists on a trial needs the plan too: `args: { plan: 'on-trial', revoked: ['create:subscription'] }`. A permission whose denial changes nothing on screen gets no story: say so in the PR.
+**Pair the revocation with the state that renders the gated control.** A button
+that only exists on a trial needs the plan too:
+`args: { plan: 'on-trial', revoked: ['create:subscription'] }`. A permission
+whose denial changes nothing on screen gets no story: say so in the PR.
 
-Check these by what is turned off, not by what the page says. The page reads the same either way, so a story that is wrong still looks right. Check that the control the permission guards is off, and that the denial message is there or gone.
+Check these by what is turned off, not by what the page says. The page reads the
+same either way, so a story that is wrong still looks right. Check that the
+control the permission guards is off, and that the denial message is there or
+gone.
 
-**Do not use `toBeEnabled` or `toBeDisabled`.** They only look at the `disabled` attribute. `@signozhq/ui` turns a button off with `aria-disabled` instead, so these matchers pass on a button nobody can click, and the test goes green while clicking straight through a denial. Check the attribute the component really sets:
+**Do not use `toBeEnabled` or `toBeDisabled`.** They only look at the `disabled`
+attribute. `@signozhq/ui` turns a button off with `aria-disabled` instead, so
+these matchers pass on a button nobody can click, and the test goes green while
+clicking straight through a denial. Check the attribute the component really
+sets:
 
 ```ts
 expect(save).toHaveAttribute('aria-disabled', 'true');
 ```
 
-**Some controls are off with no attribute at all.** The browser turns off everything inside a disabled `<fieldset>` without marking it, and a switch is a `<button>` underneath. For those, an attribute check proves nothing, and so does looking for a parent `fieldset[disabled]`. Click it and check nothing happened:
+**Some controls are off with no attribute at all.** The browser turns off
+everything inside a disabled `<fieldset>` without marking it, and a switch is a
+`<button>` underneath. For those, an attribute check proves nothing, and so does
+looking for a parent `fieldset[disabled]`. Click it and check nothing happened:
 
 ```ts
 const before = toggle.getAttribute('aria-checked');
@@ -102,22 +177,66 @@ await userEvent.click(toggle);
 await expect(toggle.getAttribute('aria-checked')).toBe(before);
 ```
 
-**Check that a new assertion can fail.** Flip it once and run it. If that story goes red and nothing else does, the assertion is real; put it back. A test that cannot fail is worse than no test, because it looks like coverage.
+**Check that a new assertion can fail.** Flip it once and run it. If that story
+goes red and nothing else does, the assertion is real; put it back. A test that
+cannot fail is worse than no test, because it looks like coverage.
 
-**Delete a story once its difference disappears.** Say a story checks that a button reads "View" rather than "Edit" when a permission is missing. If the label later becomes the same either way, that story passes no matter which permissions are held, including all of them, and it is testing nothing. When a behaviour stops depending on a permission, delete the story or rewrite it to lock in the new behaviour, and say which one you did in the PR.
+**Delete a story once its difference disappears.** Say a story checks that a
+button reads "View" rather than "Edit" when a permission is missing. If the label
+later becomes the same either way, that story passes no matter which permissions
+are held, including all of them, and it is testing nothing. When a behaviour
+stops depending on a permission, delete the story or rewrite it to lock in the
+new behaviour, and say which one you did in the PR.
 
 ## Rules
 
-- **Default is the loaded page.** `export const Default: Story = {}` with no args, every widget carrying data. Empty, loading and failed are variants or control values, never the default.
-- **A control is a knob on a response**, resolved through `handlers`, `config` or `effect`. Never a component prop, never a module mock added for one story.
-- **Every branch in the inventory is reachable from the panel.** A state that needs a code edit to see is a missing control.
-- **Never re-declare what every story already has**: banner, side nav, data state (loaded/loading/error), access preset, permissions, check state.
-- **A variant earns a story only when it is worth linking to**: an empty workspace, a viewer, a page mid-load. Everything else stays a control.
-- **Endpoints the page owns go through `response.json`**, so the Data control covers loaded, loading and failed in one declaration. Endpoints the page cannot render without (ingestion detection, preferences, feature payloads) take a plain resolver so the shell survives the loading and error states.
-- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param navigation works inside a story; a different pathname is blocked and reported by the overlay. A control for a param is worth it only when the param is a page mode someone would want to flip.
-- **File layout**: every story file for a page lives under `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`, payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing page-specific in `src/storybook/controls/`. A page that is a tab strip over several routes gets one story file per tab, in its own folder under the module page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its own mocks and `__story_mockdata__/`; the builders more than one tab needs stay in the module page's own `stories/__story_mockdata__/` (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab strip is there, and the `route` its mocks return decides which tab is open. A page's permission stories go one level further down, in `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see **Permission stories**.
-- **A state only a click reaches is a story with a `play` function**, not a control: a drawer, a modal, an edit mode the page holds in component state. Drive it with `userEvent` and the queries from `storybook/test`, take the first of a repeated row action, and wait on the state's own text. The page fetches before it renders a row, so the finder needs a timeout past the 1s default. A state the app drops again on its own, such as one keyed on an array identity that a refetch replaces, does not get a story: it would not survive being looked at. A _sequence_ of such states, a wizard's steps or a questionnaire's pages, is still a control: declare the steps in the mocks module and walk them from a `play` on the meta that destructures `mount`, which is what makes Storybook replay it on an arg change. See [references/controls.md](references/controls.md).
-- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file under a `__story_mockdata__/` open with this banner, above the imports:
+- **Default is the loaded page.** `export const Default: Story = {}` with no args,
+  every widget carrying data. Empty, loading and failed are variants or control
+  values, never the default.
+- **A control is a knob on a response**, resolved through `handlers`, `config` or
+  `effect`. Never a component prop, never a module mock added for one story.
+- **Every branch in the inventory is reachable from the panel.** A state that
+  needs a code edit to see is a missing control.
+- **Never re-declare what every story already has**: banner, side nav, data state
+  (loaded/loading/error), access preset, permissions, check state.
+- **A variant earns a story only when it is worth linking to**: an empty
+  workspace, a viewer, a page mid-load. Everything else stays a control.
+- **Endpoints the page owns go through `response.json`**, so the Data control
+  covers loaded, loading and failed in one declaration. Endpoints the page cannot
+  render without (ingestion detection, preferences, feature payloads) take a
+  plain resolver so the shell survives the loading and error states.
+- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param
+  navigation works inside a story; a different pathname is blocked and reported
+  by the overlay. A control for a param is worth it only when the param is a page
+  mode someone would want to flip.
+- **File layout**: every story file for a page lives under
+  `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`,
+  payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing
+  page-specific in `src/storybook/controls/`. A page that is a tab strip over
+  several routes gets one story file per tab, in its own folder under the module
+  page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its
+  own mocks and `__story_mockdata__/`; the builders more than one tab needs stay
+  in the module page's own `stories/__story_mockdata__/`
+  (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as
+  `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab
+  strip is there, and the `route` its mocks return decides which tab is open.
+  A page's permission stories go one level further down, in
+  `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see
+  **Permission stories**.
+- **A state only a click reaches is a story with a `play` function**, not a
+  control: a drawer, a modal, an edit mode the page holds in component state.
+  Drive it with `userEvent` and the queries from `storybook/test`, take the first
+  of a repeated row action, and wait on the state's own text. The page fetches
+  before it renders a row, so the finder needs a timeout past the 1s default. A
+  state the app drops again on its own, such as one keyed on an array identity
+  that a refetch replaces, does not get a story: it would not survive being
+  looked at. A *sequence* of such states, a wizard's steps or a
+  questionnaire's pages, is still a control: declare the steps in the mocks
+  module and walk them from a `play` on the meta that destructures `mount`, which
+  is what makes Storybook replay it on an arg change. See
+  [references/controls.md](references/controls.md).
+- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
+  under a `__story_mockdata__/` open with this banner, above the imports:
 
   ```ts
   /**
@@ -126,23 +245,52 @@ await expect(toggle.getAttribute('aria-checked')).toBe(before);
    */
   ```
 
-  The root `.gitattributes` marks both paths `linguist-generated=true`, so the reviewer gets them collapsed and spends the attention on the rendered page. The story file is the human surface and never carries the banner. A file with the banner has to stay regenerable from the page alone: no page knowledge in `src/storybook/`, and builders typed from `src/api/generated` where the endpoint has types, so a contract change is a compile error instead of a mock that lies.
-
-- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
-- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before writing a response shape inline, check if a builder exists; if not and the shape will repeat, add it there. Page-specific builders stay in the page's `__story_mockdata__/`.
-- **The story's own doc comment is per state.** Every `export const` gets one: what that state shows, not how it is built. It renders in the States list on the page's Docs page, so `Undocumented.` there is a story nobody described.
-- **Story names come from a fixed vocabulary** where one fits: `Default`, `Viewer`, `Empty`, `Loading`, `Error`. Page-specific states get page-specific names (`NoIngestion`, `Unlicensed`), never a second spelling of one of those (`ViewerAccess`, `NonAdmin`).
-- **No comment is the default.** Write one only for what the code cannot show: a shape the backend dictates, an app bug the mock reproduces, an ordering or cap the page depends on, a workaround and the reason for it. Never restate a name, a type, or what a builder plainly builds; if the sentence reads as the signature in prose, delete it. Nothing addressed to a reviewer. The one comment a story always gets is its own doc comment: what it shows, in the page's own terms.
+  The root `.gitattributes` marks both paths `linguist-generated=true`, so the
+  reviewer gets them collapsed and spends the attention on the rendered page. The
+  story file is the human surface and never carries the banner. A file with the
+  banner has to stay regenerable from the page alone: no page knowledge in
+  `src/storybook/`, and builders typed from `src/api/generated` where the endpoint
+  has types, so a contract change is a compile error instead of a mock that lies.
+- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they
+  exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
+- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed
+  helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before
+  writing a response shape inline, check if a builder exists; if not and the
+  shape will repeat, add it there. Page-specific builders stay in the page's
+  `__story_mockdata__/`.
+- **The story's own doc comment is per state.** Every `export const` gets one:
+  what that state shows, not how it is built. It renders in the States list on
+  the page's Docs page, so `Undocumented.` there is a story nobody described.
+- **Story names come from a fixed vocabulary** where one fits: `Default`,
+  `Viewer`, `Empty`, `Loading`, `Error`. Page-specific states get page-specific
+  names (`NoIngestion`, `Unlicensed`), never a second spelling of one of those
+  (`ViewerAccess`, `NonAdmin`).
+- **No comment is the default.** Write one only for what the code cannot show:
+  a shape the backend dictates, an app bug the mock reproduces, an ordering or
+  cap the page depends on, a workaround and the reason for it. Never restate a
+  name, a type, or what a builder plainly builds; if the sentence reads as the
+  signature in prose, delete it. Nothing addressed to a reviewer. The one
+  comment a story always gets is its own doc comment: what it shows, in the
+  page's own terms.
 
 ## Done means
 
 - [ ] `Default` shows the page with data, checked in dark and light
-- [ ] title follows the sidebar rules, tags declared, and the page's entry added to the `storySort.order` literal in `.storybook/preview.tsx`
-- [ ] the meta carries its doc comment with the `Route:` line, the meta restates `parameters: { ...pageStory.parameters }` after the spread, and every story export carries its own doc comment
-- [ ] the page's Docs page renders: description, controls table, and one row per state with no `Undocumented.`
-- [ ] a page tagged `authz` has its `Authz` folder: one story per permission it reads, each reached by `revoked`, none of them a role preset, and each one checked by the `disabled` state of what the permission gates
+- [ ] title follows the sidebar rules, tags declared, and the page's entry added
+      to the `storySort.order` literal in `.storybook/preview.tsx`
+- [ ] the meta carries its doc comment with the `Route:` line, the meta restates
+      `parameters: { ...pageStory.parameters }` after the spread, and every story
+      export carries its own doc comment
+- [ ] the page's Docs page renders: description, controls table, and one row per
+      state with no `Undocumented.`
+- [ ] a page tagged `authz` has its `Authz` folder: one story per permission it
+      reads, each reached by `revoked`, none of them a role preset, and each one
+      checked by the `disabled` state of what the permission gates
 - [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
 - [ ] every control flipped once, its effect seen on screen
-- [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled request, no React warning
+- [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled
+      request, no React warning
 - [ ] no navigation overlay on mount
-- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`, `pnpm exec oxfmt --check <files>` all clean. The repo has no prettier: `pnpm exec prettier` prints a pass while exiting 254
+- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`,
+      `pnpm exec oxfmt --check <files>` all clean. The repo has no
+      prettier: `pnpm exec prettier` prints a pass while exiting 254

.claude/skills/signoz-page-story/references/controls.md

@@ -1,10 +1,13 @@
 # Turning the inventory into controls
 
-Every row of the inventory becomes a control, a global control that already exists, or a documented reason it cannot be one.
+Every row of the inventory becomes a control, a global control that already
+exists, or a documented reason it cannot be one.
 
 ## Imports
 
-Paths written as `src/storybook/...` in prose are repo paths, not import specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules inside `src/storybook/` import each other relatively.
+Paths written as `src/storybook/...` in prose are repo paths, not import
+specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules
+inside `src/storybook/` import each other relatively.
 
 | Import | From |
 | --- | --- |
@@ -28,21 +31,38 @@ Paths written as `src/storybook/...` in prose are repo paths, not import specifi
 
 Rules that come with them:
 
-- `countControl` `max` goes past what the page renders, so a story can show the cap being hit. `0` is the empty state, which is why an empty list rarely needs its own story. When the cap is in the _request_ (`?limit=5`) rather than the renderer, stop `max` at the limit: a longer response is a body the backend cannot send.
-- `choiceControl` options come from a `const` array typed with `(typeof X)[number]`, not from string literals scattered in the handlers.
-- Defaults describe the fully-populated page. The panel starts where `Default` starts.
-- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per control.
-- `description` only when the name does not carry the effect (what dismissing does, what the cap is, which widget it feeds).
+- `countControl` `max` goes past what the page renders, so a story can show the
+  cap being hit. `0` is the empty state, which is why an empty list rarely needs
+  its own story. When the cap is in the *request* (`?limit=5`) rather than the
+  renderer, stop `max` at the limit: a longer response is a body the backend
+  cannot send.
+- `choiceControl` options come from a `const` array typed with
+  `(typeof X)[number]`, not from string literals scattered in the handlers.
+- Defaults describe the fully-populated page. The panel starts where `Default`
+  starts.
+- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or
+  `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per
+  control.
+- `description` only when the name does not carry the effect (what dismissing
+  does, what the cap is, which widget it feeds).
 
 ## Which hook
 
 `defineStoryMocks` takes three, all optional:
 
-- `handlers(values, response)`: the page's endpoints. Everything the page owns goes through `response.json`, so the global Data control turns the whole page into loading or failed without a second declaration. An endpoint the page cannot render at all without (ingestion detection, preferences, license payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays visible while the rest hangs or fails.
-- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`, `appContext`, `reduxState`, `queryBuilder`, `theme`.
+- `handlers(values, response)`: the page's endpoints. Everything the page owns
+  goes through `response.json`, so the global Data control turns the whole page
+  into loading or failed without a second declaration. An endpoint the page
+  cannot render at all without (ingestion detection, preferences, license
+  payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays
+  visible while the rest hangs or fails.
+- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`,
+  `appContext`, `reduxState`, `queryBuilder`, `theme`.
 - `effect(values)`: module-level state no provider exposes.
 
-One endpoint feeding several widgets stays one handler that reads the request. `response.json` hands the request to the builder and awaits it, so reading a query param, or a POST body, does not cost the Data control:
+One endpoint feeding several widgets stays one handler that reads the request.
+`response.json` hands the request to the builder and awaits it, so reading a
+query param, or a POST body, does not cost the Data control:
 
 ```ts
 rest.get(
@@ -65,11 +85,18 @@ rest.post(
 ),
 ```
 
-Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the endpoint has to keep answering while the Data control is on `loading` or `error`: detection calls the page cannot render without.
+Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the
+endpoint has to keep answering while the Data control is on `loading` or
+`error`: detection calls the page cannot render without.
 
 ## Mutations
 
-A control drives the response, so a write the page makes against state a control owns does not stick: the refetch answers with the control's value and the button appears to do nothing. Two honest options: leave it declarative and say so in the PR, or move the state into `effect` so the handler can read what the page wrote. Never fake the write by mutating a builder's module state without saying where the state lives.
+A control drives the response, so a write the page makes against state a control
+owns does not stick: the refetch answers with the control's value and the button
+appears to do nothing. Two honest options: leave it declarative and say so in
+the PR, or move the state into `effect` so the handler can read what the page
+wrote. Never fake the write by mutating a builder's module state without saying
+where the state lives.
 
 ## Wiring it up
 
@@ -119,11 +146,15 @@ const meta = {
 } satisfies Meta<ServicesArgs>;
 ```
 
-`PageStoryArgs` folds in the global controls, so a story's `args` can set `access`, `dataState` or `banner` next to the page's own knobs and stay typed.
+`PageStoryArgs` folds in the global controls, so a story's `args` can set
+`access`, `dataState` or `banner` next to the page's own knobs and stay typed.
 
 ## A step the page keeps in component state
 
-A wizard's step, a questionnaire's page, a picker's next question: the page holds it in `useState` and nothing in the URL says which one is open. It is still a control. Declare the steps in the mocks module and drive them from a `play` on the **meta**, so every story of the page inherits the walk and only sets `args`:
+A wizard's step, a questionnaire's page, a picker's next question: the page holds
+it in `useState` and nothing in the URL says which one is open. It is still a
+control. Declare the steps in the mocks module and drive them from a `play` on
+the **meta**, so every story of the page inherits the walk and only sets `args`:
 
 ```tsx
 // <Page>.stories.mocks.tsx
@@ -148,23 +179,39 @@ const meta = {
 export const Configure: Story = { args: { step: 'configure' } };
 ```
 
-**Destructuring `mount` is what makes it a control.** Storybook re-runs a play function on an arg change only for a story whose play asks to be remounted (`usesMount`); otherwise it re-renders the tree the previous walk left behind and the panel looks broken. With `mount` destructured, the story renders when `play` calls it, and every arg change replays the walk from a fresh mount.
+**Destructuring `mount` is what makes it a control.** Storybook re-runs a play
+function on an arg change only for a story whose play asks to be remounted
+(`usesMount`); otherwise it re-renders the tree the previous walk left behind and
+the panel looks broken. With `mount` destructured, the story renders when `play`
+calls it, and every arg change replays the walk from a fresh mount.
 
 The walk itself:
 
-- one `answer` function per step, in an array indexed the same as the step list, so reaching step _n_ is `answers.slice(0, STEPS.indexOf(step))`;
-- answer each step with the least its Next button accepts, and prefer a "do this later" over filling a slider;
-- run them sequentially (`reduce` over a promise), since each answer is what renders the step the next one reads;
-- bail out when the page did not start where the walk expects, such as a source deep-linked past the questions. Check for the first step's own text rather than reading another control's value.
+- one `answer` function per step, in an array indexed the same as the step list,
+  so reaching step *n* is `answers.slice(0, STEPS.indexOf(step))`;
+- answer each step with the least its Next button accepts, and prefer a "do this
+  later" over filling a slider;
+- run them sequentially (`reduce` over a promise), since each answer is what
+  renders the step the next one reads;
+- bail out when the page did not start where the walk expects, such as a source
+  deep-linked past the questions. Check for the first step's own text rather than
+  reading another control's value.
 
-An endpoint that only settles the transition between two steps (the profile a questionnaire saves before its last page) takes a plain resolver, or the Data control on `loading` strands the walk halfway.
+An endpoint that only settles the transition between two steps (the profile a
+questionnaire saves before its last page) takes a plain resolver, or the Data
+control on `loading` strands the walk halfway.
 
 ## Not a control
 
-- Anything the global controls already cover: banner, side nav, data state, access preset, granted permissions, revoked permissions, check state.
-- A knob whose effect nobody can see on the page. Delete it or find the widget it was supposed to drive.
-- A raw payload as an object control. Controls carry intent (`5 dashboards`, `viewer`), and the builder turns intent into the payload.
-- Anything that needs a module mock or a component prop to work. If the state cannot be produced from a response, config or module state, say so in the PR instead of faking it.
+- Anything the global controls already cover: banner, side nav, data state,
+  access preset, granted permissions, revoked permissions, check state.
+- A knob whose effect nobody can see on the page. Delete it or find the widget it
+  was supposed to drive.
+- A raw payload as an object control. Controls carry intent (`5 dashboards`,
+  `viewer`), and the builder turns intent into the payload.
+- Anything that needs a module mock or a component prop to work. If the state
+  cannot be produced from a response, config or module state, say so in the PR
+  instead of faking it.
 
 ## Control or story
 
@@ -173,8 +220,12 @@ Default to a control. Write a story when the state is worth a link:
 - the fresh workspace, because that is what a new user sees
 - a page-defining mode (a tab, a category) that has its own layout
 
-A permission that visibly changes the page is a story too, but it goes in the page's `Authz` folder, one per permission, turned with the `Revoked` control. See **Permission stories** in SKILL.md.
+A permission that visibly changes the page is a story too, but it goes in the
+page's `Authz` folder, one per permission, turned with the `Revoked` control.
+See **Permission stories** in SKILL.md.
 
 Combinations of controls do not need stories, which is what the panel is for.
 
-Each story gets one prose doc comment: what it shows, in the page's own terms. Everywhere else the comment rule in SKILL.md applies: write one only for what the code cannot show.
+Each story gets one prose doc comment: what it shows, in the page's own terms.
+Everywhere else the comment rule in SKILL.md applies: write one only for what
+the code cannot show.

.claude/skills/signoz-page-story/references/discovery.md

@@ -1,10 +1,14 @@
 # Mapping a page
 
-Two passes: read the code, then let the running story correct you. Write the inventory down: it is what the controls are derived from, and the only protection against a story that renders one state and calls it a page.
+Two passes: read the code, then let the running story correct you. Write the
+inventory down: it is what the controls are derived from, and the only
+protection against a story that renders one state and calls it a page.
 
 ## Pass 1: read the page
 
-Start at `src/pages/<Page>/` and follow it outward: the containers it mounts (`src/container/<Feature>/`), the hooks those use, the components with their own fetches. Stop at leaf components that take props only.
+Start at `src/pages/<Page>/` and follow it outward: the containers it mounts
+(`src/container/<Feature>/`), the hooks those use, the components with their own
+fetches. Stop at leaf components that take props only.
 
 Grep recipes, run against the page's directories:
 
@@ -20,32 +24,41 @@ Grep recipes, run against the page's directories:
 | empty and error branches | `isLoading\|isError\|isFetching\|length === 0\|!data` |
 | render caps | `slice(0,\|PAGE_SIZE\|pageSize\|limit` |
 
-`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names, `src/lib/authz/README.md` how a permission check resolves.
+`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names,
+`src/lib/authz/README.md` how a permission check resolves.
 
 ## The inventory
 
 One table, in the story's PR or scratch notes:
 
-| Endpoint        | Feeds            | States it can be in    |
-| --------------- | ---------------- | ---------------------- |
+| Endpoint | Feeds | States it can be in |
+| --- | --- | --- |
 | `GET /api/v1/x` | the header count | populated, zero, error |
 
 Plus four short lists:
 
 - **Query params** the page reads, and what each one switches.
 - **Permission checks** the page makes, and what disappears when each is denied.
-- **Preferences and flags** that change layout (dismissed banners, onboarding checklists, opt-in views).
+- **Preferences and flags** that change layout (dismissed banners, onboarding
+  checklists, opt-in views).
 - **Caps**: how many rows each list renders before it truncates or paginates.
 
-A state that appears in this inventory and not in the controls panel is a bug in the story.
+A state that appears in this inventory and not in the controls panel is a bug in
+the story.
 
 ## Pass 2: let it run
 
-Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the route with `layout: 'app'`, then open it (see verify.md). The console is the oracle:
+Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the
+route with `layout: 'app'`, then open it (see verify.md). The console is the
+oracle:
 
-- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1 missed. Add it to the inventory.
-- an msw unhandled-request warning: a request going to an origin the handlers do not answer on. handlers are declared against `http://localhost`.
-- a spinner that never resolves with the Data control on `loaded`: a handler whose URL does not match what the page calls.
-- the navigation overlay on mount: the page redirects, usually because `route` is wrong or a guard is failing on a permission the controls have not granted.
+- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1
+  missed. Add it to the inventory.
+- an msw unhandled-request warning: a request going to an origin the handlers do
+  not answer on. handlers are declared against `http://localhost`.
+- a spinner that never resolves with the Data control on `loaded`: a handler
+  whose URL does not match what the page calls.
+- the navigation overlay on mount: the page redirects, usually because `route`
+  is wrong or a guard is failing on a permission the controls have not granted.
 
 Repeat until the console is silent. Only then start declaring controls.

.claude/skills/signoz-page-story/references/verify.md

@@ -1,6 +1,7 @@
 # Verifying a page story
 
-A story is not done because it compiles. It is done when each control has been seen changing the page and the console is silent.
+A story is not done because it compiles. It is done when each control has been
+seen changing the page and the console is silent.
 
 ## Run it
 
@@ -8,9 +9,12 @@ A story is not done because it compiles. It is done when each control has been s
 cd frontend && pnpm storybook --ci --quiet   # :6006, background it
 ```
 
-A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an already-running server; an empty first poll is not a broken `stories` glob.
+A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an
+already-running server; an empty first poll is not a broken `stories` glob.
 
-Story ids come from the meta title: `Pages/Services/List` → `pages-services-list`, plus the story export in kebab-case. Render one story on its own:
+Story ids come from the meta title: `Pages/Services/List` →
+`pages-services-list`, plus the story export in kebab-case. Render one story on
+its own:
 
 ```
 http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
@@ -18,7 +22,9 @@ http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
 
 ## Flip controls from the URL
 
-Args are settable in the iframe URL, so a whole sweep runs headless without touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays indexed, several separated by `;`, and the theme through `globals`:
+Args are settable in the iframe URL, so a whole sweep runs headless without
+touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays
+indexed, several separated by `;`, and the theme through `globals`:
 
 ```
 &args=services:0;apdex:poor;access:viewer;dataState:loading
@@ -26,11 +32,13 @@ Args are settable in the iframe URL, so a whole sweep runs headless without touc
 &globals=theme:light
 ```
 
-That is the cheap way to check a control does something: load with and without it, diff the page text.
+That is the cheap way to check a control does something: load with and without
+it, diff the page text.
 
 ## Drive it
 
-Playwright lives in the repo's e2e workspace, so a scratch script can use it directly:
+Playwright lives in the repo's e2e workspace, so a scratch script can use it
+directly:
 
 ```js
 import pw from '<repo>/tests/e2e/node_modules/playwright/index.js';
@@ -50,18 +58,40 @@ console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
 await browser.close();
 ```
 
-Screenshots are worth taking for `Default` in both themes: text extraction does not catch an unstyled page. Take them with [sbshot](https://github.com/SigNoz/sbshot), e.g. `sbshot capture http://localhost:6006 --title <story title> --theme dark,light`.
+Screenshots are worth taking for `Default` in both themes: text extraction does
+not catch an unstyled page. Take them with
+[sbshot](https://github.com/SigNoz/sbshot), e.g.
+`sbshot capture http://localhost:6006 --title <story title> --theme dark,light`.
 
-That is one run, for checking the story you just wrote. Comparing two branches is a different job: see the `sbshot-visual-diff` skill, which covers the baseline to pick, measuring the noise and exporting something a reviewer can open.
+That is one run, for checking the story you just wrote. Comparing two branches is
+a different job: see the `sbshot-visual-diff` skill, which covers the baseline to
+pick, measuring the noise and exporting something a reviewer can open.
 
 ## Gates
 
-- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an msw unhandled-request warning, a React key or state warning: assume the story is wrong first. A warning that survives is sometimes the app's. Prove it by turning off the control that renders the widget and watching the warning go with it, and by finding the same component elsewhere doing it right. Then report the app bug in the PR. Never invent a field the API does not return to silence a warning.
-- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load means the page is trying to leave: wrong `route`, or a guard denying on a permission the controls did not grant.
-- **Every control moves something.** Sweep them one at a time from the URL and diff the page text. A control with no diff is either wired to nothing or aimed at a widget that is not rendering. Some only show their effect after an interaction, such as a tab that has to be clicked or a select that has to be opened. Drive that interaction rather than calling the control unobservable.
-- **Both themes render styled.** An unstyled page means the story is not inside the provider decorator, or `<body data-theme>` was lost.
-- **Roles agree.** `<body data-signoz-story-role>` and `<body data-signoz-context-role>` disagreeing means the page reads a different `AppContext` than the story config fills.
-- **The page's own navigation works.** Tabs, filters and pagination that write query params should re-render the page in place; only leaving the page belongs in the overlay.
+- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an
+  msw unhandled-request warning, a React key or state warning: assume the story
+  is wrong first. A warning that survives is sometimes the app's. Prove it by
+  turning off the control that renders the widget and watching the warning go
+  with it, and by finding the same component elsewhere doing it right. Then
+  report the app bug in the PR. Never invent a field the API does not return to
+  silence a warning.
+- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load
+  means the page is trying to leave: wrong `route`, or a guard denying on a
+  permission the controls did not grant.
+- **Every control moves something.** Sweep them one at a time from the URL and
+  diff the page text. A control with no diff is either wired to nothing or aimed
+  at a widget that is not rendering. Some only show their effect after an
+  interaction, such as a tab that has to be clicked or a select that has to be
+  opened. Drive that interaction rather than calling the control unobservable.
+- **Both themes render styled.** An unstyled page means the story is not inside
+  the provider decorator, or `<body data-theme>` was lost.
+- **Roles agree.** `<body data-signoz-story-role>` and
+  `<body data-signoz-context-role>` disagreeing means the page reads a different
+  `AppContext` than the story config fills.
+- **The page's own navigation works.** Tabs, filters and pagination that write
+  query params should re-render the page in place; only leaving the page belongs
+  in the overlay.
 
 ## Then the usual
 
@@ -71,7 +101,9 @@ pnpm exec oxlint <changed files>
 pnpm exec oxfmt --check <changed files>
 ```
 
-There is no prettier in this repo. `pnpm exec prettier --check` fetches something else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is not one.
+There is no prettier in this repo. `pnpm exec prettier --check` fetches something
+else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is
+not one.
 
 ## Common failures
 

cmd/community/server.go

@@ -121,8 +121,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ context.Context, _ factory.ProviderSettings, _ flagger.Flagger, _ licensing.Licensing, _ telemetrystore.TelemetryStore, _ retention.Getter, _ organization.Getter, _ zeus.Zeus) (factory.NamedMap[factory.ProviderFactory[meterreporter.Reporter, meterreporter.Config]], string) {
 			return signoz.NewMeterReporterProviderFactories(), "noop"
 		},
-		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics, cfg querier.Config) querier.Handler {
-			return querier.NewHandler(ps, q, a, cfg)
+		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
+			return querier.NewHandler(ps, q, a)
 		},
 		func(_ sqlstore.SQLStore, _ dashboard.Module, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil

cmd/enterprise/server.go

@@ -172,9 +172,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return factories, "http"
 		},
-		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics, cfg querier.Config) querier.Handler {
-			communityHandler := querier.NewHandler(ps, q, a, cfg)
-			return eequerier.NewHandler(ps, q, communityHandler, cfg)
+		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
+			communityHandler := querier.NewHandler(ps, q, a)
+			return eequerier.NewHandler(ps, q, communityHandler)
 		},
 		func(sqlStore sqlstore.SQLStore, dashboardModule dashboard.Module, global global.Global, zeus zeus.Zeus, gateway gateway.Gateway, licensing licensing.Licensing, serviceAccount serviceaccount.Module, config cloudintegration.Config) (cloudintegration.Module, error) {
 			defStore := pkgcloudintegration.NewServiceDefinitionStore()

conf/example.yaml

@@ -178,8 +178,6 @@ querier:
   # range with padding to include slightly delayed log exports. Logs only; set
   # to 0 to disable.
   log_trace_id_window_padding: 5m
-  # The maximum time range of a query range request. Set to 0 to disable.
-  max_time_range: 17520h
 
 ##################### TelemetryStore #####################
 telemetrystore:

docs/api/openapi.yml

@@ -3783,6 +3783,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4525,6 +4532,7 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4540,6 +4548,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4553,6 +4562,7 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4638,6 +4648,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4717,6 +4739,16 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4905,6 +4937,104 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+        "y":
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none.
+          type: string
+        scale:
+          $ref: '#/components/schemas/DashboardtypesAxisScale'
+        softMax:
+          nullable: true
+          type: number
+        softMin:
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values colour dots and drive the legend. Empty colours by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales dot size. Empty draws every dot
+            at the default size.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty uses the first value
+            column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty uses the second
+            value column.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+        dimensions:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesTableFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        minSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        opacity:
+          $ref: '#/components/schemas/DashboardtypesPointOpacity'
+        size:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+      type: object
+    DashboardtypesScatterPlotThreshold:
+      properties:
+        axis:
+          $ref: '#/components/schemas/DashboardtypesThresholdAxis'
+        color:
+          type: string
+        label:
+          type: string
+        unit:
+          type: string
+        value:
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -5018,6 +5148,11 @@ components:
       - value
       - name
       type: object
+    DashboardtypesThresholdAxis:
+      enum:
+      - x
+      - "y"
+      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text

ee/querier/handler.go

@@ -21,15 +21,13 @@ type handler struct {
 	set       factory.ProviderSettings
 	querier   querier.Querier
 	community querier.Handler
-	config    querier.Config
 }
 
-func NewHandler(set factory.ProviderSettings, querier querier.Querier, community querier.Handler, config querier.Config) querier.Handler {
+func NewHandler(set factory.ProviderSettings, querier querier.Querier, community querier.Handler) querier.Handler {
 	return &handler{
 		set:       set,
 		querier:   querier,
 		community: community,
-		config:    config,
 	}
 }
 
@@ -55,7 +53,7 @@ func (h *handler) QueryRange(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	if err := queryRangeRequest.Validate(qbtypes.WithMaxTimeRange(h.config.MaxTimeRange)); err != nil {
+	if err := queryRangeRequest.Validate(); err != nil {
 		render.Error(rw, err)
 		return
 	}

frontend/__mocks__/uplotMock.ts

@@ -57,6 +57,7 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
+const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -70,6 +71,7 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/public/locales/en/channels.json

@@ -12,7 +12,6 @@
   "section_connection": "Connection",
   "section_message": "Message",
   "section_advanced": "Advanced",
-  "description_slack_advanced": "The rest of the Slack attachment. Every box here is optional.",
   "section_recipients": "Recipients",
   "field_channel_name": "Name",
   "help_channel_name_immutable": "Renaming is blocked while alert rules and routing policies still reference a channel by name.",
@@ -187,32 +186,8 @@
   "pager_details_invalid_json": "Enter valid JSON, or clear the box to send no details",
   "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
   "api_key_required": "API Key is mandatory",
-  "to_required": "To field is mandatory",
-  "channel_name_required": "Channel name is mandatory",
-  "tooltip_send_resolved": "Also notify this channel when an alert stops firing.",
-  "tooltip_channel_type": "Where the alert is delivered. It cannot be changed once the channel is saved.",
-  "button_discard_channel": "Discard",
-  "button_discard_confirm": "Discard",
-  "discard_changes_title": "Discard your changes?",
-  "discard_changes_body": "This form has unsaved changes. If you leave now, they are gone and the channel stays as it is.",
-  "tooltip_save_no_changes": "Nothing has changed yet.",
-  "entry_slack_field": "Field",
-  "entry_slack_action": "Action",
-  "entry_incidentio_metadata": "Entry",
-  "label_slack_field_title": "Title",
-  "tooltip_slack_field_title": "The bold label Slack shows above the value, for example Severity.",
-  "label_slack_field_value": "Value",
-  "tooltip_slack_field_value": "What Slack shows under the title. Templates are allowed, so `{{ .CommonLabels.severity }}` fills in from the alert.",
-  "label_incidentio_metadata_key": "Key",
-  "label_incidentio_metadata_value": "Value",
-  "tooltip_slack_fields": "Extra entries Slack renders as a small table inside the alert attachment.",
-  "tooltip_slack_actions": "Buttons Slack renders under the attachment. A button with a URL links out; the rest are for a Slack app to handle.",
-  "tooltip_slack_action_text": "The label on the button.",
-  "tooltip_slack_action_url": "Where the button sends the reader. Leave empty for a button a Slack app handles instead.",
-  "tooltip_slack_action_name": "Identifies the button to a Slack app. Not needed for a button that only links out.",
-  "tooltip_slack_action_value": "Sent to a Slack app along with the name, so one app can tell its buttons apart.",
-  "tooltip_slack_action_style": "default, primary or danger. Slack colours the button accordingly.",
-  "tooltip_slack_action_confirm": "Text for a confirmation prompt shown before the action runs. Leave empty for no prompt.",
+	"to_required": "To field is mandatory",
+	"channel_name_required": "Channel name is mandatory",
   "bot_token_required": "Bot token is mandatory for creating a telegram channel",
   "chat_id_required": "Chat ID is mandatory for creating a telegram channel",
   "telegram_tip": "Create a bot with @BotFather, add it to the chat, then paste its token and the chat's numeric id below.",

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

@@ -5062,6 +5062,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -5818,6 +5824,126 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesHeatmapPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+}
+export interface DashboardtypesScatterPlotAxisDTO {
+	/**
+	 * @type string
+	 * @description Axis title. Empty draws none.
+	 */
+	label?: string;
+	scale?: DashboardtypesAxisScaleDTO;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export interface DashboardtypesScatterPlotAxesDTO {
+	x?: DashboardtypesScatterPlotAxisDTO;
+	y?: DashboardtypesScatterPlotAxisDTO;
+}
+
+/**
+ * @minimum 2
+ * @maximum 40
+ * @nullable
+ */
+export type DashboardtypesPointDiameterDTO = number | null;
+
+/**
+ * @minimum 0.1
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesPointOpacityDTO = number | null;
+
+export interface DashboardtypesScatterPlotPointsDTO {
+	maxSize?: DashboardtypesPointDiameterDTO | null;
+	minSize?: DashboardtypesPointDiameterDTO | null;
+	opacity?: DashboardtypesPointOpacityDTO | null;
+	size?: DashboardtypesPointDiameterDTO | null;
+}
+
+export interface DashboardtypesScatterPlotChartAppearanceDTO {
+	points?: DashboardtypesScatterPlotPointsDTO;
+}
+
+export interface DashboardtypesScatterPlotDimensionsDTO {
+	/**
+	 * @type array,null
+	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values colour dots and drive the legend. Empty colours by every group-by label.
+	 */
+	colorBy?: string[] | null;
+	/**
+	 * @type string
+	 * @description Value column key that scales dot size. Empty draws every dot at the default size.
+	 */
+	sizeBy?: string;
+	/**
+	 * @type string
+	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty uses the first value column.
+	 */
+	x?: string;
+	/**
+	 * @type string
+	 * @description Value column key plotted on the y axis. Empty uses the second value column.
+	 */
+	y?: string;
+}
+
+export enum DashboardtypesThresholdAxisDTO {
+	x = 'x',
+	y = 'y',
+}
+export interface DashboardtypesScatterPlotThresholdDTO {
+	axis?: DashboardtypesThresholdAxisDTO;
+	/**
+	 * @type string
+	 */
+	color: string;
+	/**
+	 * @type string
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	value: number;
+}
+
+export interface DashboardtypesScatterPlotPanelSpecDTO {
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	formatting?: DashboardtypesTableFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesScatterPlotThresholdDTO[] | null;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5828,7 +5954,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6810,6 +6937,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
 	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
 }
 /**
  * @nullable

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -21,6 +21,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
+	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -904,6 +905,12 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });
 
+describe('mapPanelTypeToRequestType', () => {
+	it('sends a scatter plot as scalar, like a table', () => {
+		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
+	});
+});
+
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -51,6 +51,7 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
 			return 'scalar';
@@ -274,6 +275,7 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
 			panelType === PANEL_TYPES.VALUE);
 

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.module.scss

@@ -15,12 +15,12 @@
 .title {
 	font-size: 16px;
 	font-weight: 500;
-	color: var(--l1-foreground);
+	color: var(--text-vanilla-100);
 }
 
 .subtitle {
 	font-size: 14px;
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400);
 	max-width: 400px;
 }
 

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.module.scss

@@ -9,18 +9,18 @@
 }
 
 .icon {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400);
 }
 
 .title {
 	font-size: 16px;
 	font-weight: 500;
-	color: var(--l1-foreground);
+	color: var(--text-vanilla-100);
 }
 
 .subtitle {
 	font-size: 14px;
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400);
 	max-width: 400px;
 }
 

frontend/src/components/BackHeader/BackHeader.module.scss

@@ -1,24 +0,0 @@
-/* The space sits between the way back and the title, rather than above both of
-   them, so the two read as separate steps. */
-.header {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: var(--spacing-4);
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	min-height: 26px;
-	font-size: 18px;
-	font-weight: 600;
-	letter-spacing: -0.01em;
-	color: var(--l1-foreground);
-}
-
-.divider {
-	--divider-color: var(--l1-border);
-	--divider-margin: 10px 0 16px 0;
-}

frontend/src/components/BackHeader/BackHeader.tsx

@@ -1,56 +0,0 @@
-import { ReactNode } from 'react';
-import { ArrowLeft } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Divider } from '@signozhq/ui/divider';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { isModifierKeyPressed } from 'utils/app';
-
-import styles from './BackHeader.module.scss';
-
-export interface BackHeaderProps {
-	/** Where the page came from, named as the place rather than the action. */
-	backLabel: string;
-	backRoute: string;
-	title: ReactNode;
-	testId?: string;
-}
-
-/**
- * A way back on its own line, then the page's own title. The two rows keep the
- * title clear of whatever sits beside it, such as a copy button.
- */
-function BackHeader({
-	backLabel,
-	backRoute,
-	title,
-	testId,
-}: BackHeaderProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	return (
-		<>
-			<div className={styles.header} data-testid={testId}>
-				<Button
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					prefix={<ArrowLeft size={12} />}
-					onClick={(e: React.MouseEvent): void => {
-						safeNavigate(backRoute, { newTab: isModifierKeyPressed(e) });
-					}}
-					testId="back-link"
-				>
-					{backLabel}
-				</Button>
-				<div className={styles.title}>{title}</div>
-			</div>
-			<Divider className={styles.divider} />
-		</>
-	);
-}
-
-BackHeader.defaultProps = {
-	testId: undefined,
-};
-
-export default BackHeader;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -18,6 +18,7 @@ import {
 	STEP_INTERVAL_PLACEHOLDER,
 } from '../../queryBuilderFields.utils';
 
+import { isScalarPanelType } from '../panelTypes';
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -45,10 +46,7 @@ function QueryAggregationOptions({
 		const isNonMetricSource =
 			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
 
-		if (
-			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
-		) {
+		if (isNonMetricSource && isScalarPanelType(panelType)) {
 			return { hidden: true, disabled: false, pinned: false };
 		}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -9,7 +9,6 @@ import {
 import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
 import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
@@ -27,6 +26,7 @@ import {
 	resolveQueryBuilderField,
 } from '../queryBuilderFields.utils';
 
+import { isScalarPanelType } from './panelTypes';
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -112,11 +112,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	}
 
 	const showReduceTo = useMemo(
-		() =>
-			dataSource === DataSource.METRICS &&
-			(panelType === PANEL_TYPES.TABLE ||
-				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
+		() => dataSource === DataSource.METRICS && isScalarPanelType(panelType),
 		[dataSource, panelType],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/panelTypes.ts

@@ -0,0 +1,13 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+/** Panels that reduce each query to one value per group over the whole window. */
+const SCALAR_PANEL_TYPES: ReadonlySet<string> = new Set<string>([
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.SCATTER,
+	PANEL_TYPES.PIE,
+	PANEL_TYPES.VALUE,
+]);
+
+export function isScalarPanelType(panelType?: string | null): boolean {
+	return panelType != null && SCALAR_PANEL_TYPES.has(panelType);
+}

frontend/src/components/QueryBuilderV2/__tests__/QueryAggregation.test.tsx

@@ -14,6 +14,17 @@ jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
 const queryData = initialQueriesMap.traces.builder
 	.queryData[0] as IBuilderQuery;
 
+function renderFor(panelType: PANEL_TYPES, dataSource: DataSource): void {
+	render(
+		<QueryAggregationOptions
+			dataSource={dataSource}
+			panelType={panelType}
+			onAggregationIntervalChange={jest.fn()}
+			queryData={queryData}
+		/>,
+	);
+}
+
 describe('QueryAggregationOptions step interval placeholder', () => {
 	it('shows the configured placeholder', () => {
 		render(
@@ -34,14 +45,27 @@ describe('QueryAggregationOptions step interval placeholder', () => {
 	});
 
 	it('falls back to Auto', () => {
-		render(
-			<QueryAggregationOptions
-				dataSource={DataSource.TRACES}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				onAggregationIntervalChange={jest.fn()}
-				queryData={queryData}
-			/>,
-		);
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
 		expect(screen.getByPlaceholderText('Auto')).toBeInTheDocument();
 	});
 });
+
+describe('QueryAggregationOptions step interval', () => {
+	it.each([PANEL_TYPES.TABLE, PANEL_TYPES.SCATTER, PANEL_TYPES.PIE])(
+		'is hidden for a %s panel over traces, which reduces the whole window',
+		(panelType) => {
+			renderFor(panelType, DataSource.TRACES);
+			expect(screen.queryByText('every')).not.toBeInTheDocument();
+		},
+	);
+
+	it('stays for a scatter plot over metrics, where it sets the series step', () => {
+		renderFor(PANEL_TYPES.SCATTER, DataSource.METRICS);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+
+	it('stays for a time series over traces', () => {
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -2,7 +2,6 @@ import { TanStackHoverTooltip } from './TanStackHoverTooltip';
 import { TanStackTableBase } from './TanStackTable';
 import TanStackTableText from './TanStackTableText';
 
-export { default as ColumnSelector } from './ColumnSelector';
 export * from './TanStackHoverTooltip';
 export * from './TanStackTableStateContext';
 export * from './types';

frontend/src/constants/panelTypes.ts

@@ -36,6 +36,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
+		[PANEL_TYPES.SCATTER]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -337,6 +337,7 @@ export enum PANEL_TYPES {
 	TRACE = 'trace',
 	BAR = 'bar',
 	AREA = 'area',
+	SCATTER = 'scatter',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	HEATMAP = 'heatmap',

frontend/src/constants/reactQueryKeys.ts

@@ -24,7 +24,7 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
 	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
-	CLONE_ALERT_RULE: 'CLONE_ALERT_RULE',
+	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',

frontend/src/container/CreateAlertChannels/channelRoundTrip.test.ts

@@ -101,16 +101,6 @@ const SPECS: Record<string, Record<string, unknown>> = {
 		metadata: { team: 'ops' },
 		sendResolved: true,
 	},
-	telegram: {
-		apiUrl: 'https://api.telegram.org',
-		botToken: '123456789:AA-token',
-		chatId: -1001234567890,
-		messageThreadId: 42,
-		title: 't',
-		message: 'm',
-		disableNotifications: true,
-		sendResolved: true,
-	},
 };
 
 describe('load then save round trip', () => {

frontend/src/container/FormAlertChannels/FormAlertChannels.module.scss

@@ -22,26 +22,13 @@
 	min-width: 0;
 }
 
-/* Laid out like the alert pages: discard on the left, test and save together on
-   the right. Sticky rather than fixed, so it stays inside the page's own scroll
-   instead of adding another offset over the bottom strip. */
 .actions {
-	position: sticky;
-	bottom: 0;
-	z-index: 2;
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	justify-content: flex-start;
 	gap: var(--spacing-3);
 	padding: var(--spacing-4) 0;
-	border-top: 1px solid var(--l2-border);
-	background: var(--l1-background);
-}
-
-.actionGroup {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
+	border-top: 1px solid var(--l1-border);
 }
 
 // TODO: @AshwinBhatkal to be removed once textarea is in signoz ui components
@@ -49,21 +36,3 @@
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-
-/* The @signozhq inputs leave their surface transparent and take the card's
-   colour. antd paints its textareas instead, so beside them they read as a
-   different control, most visibly in light mode. */
-// TODO: @AshwinBhatkal to be removed once textarea is in signoz ui components
-.fields :global(textarea.ant-input),
-.fields :global(textarea.ant-input:hover),
-.fields :global(textarea.ant-input:focus),
-.fields :global(textarea.ant-input-focused) {
-	background: var(--input-background, transparent);
-	border-width: var(--input-border-width, 1px);
-	border-style: var(--input-border-style, solid);
-	border-color: var(--input-border-color, var(--border));
-	border-radius: var(--input-border-radius, calc(var(--radius) - 2px));
-	font-size: var(--input-font-size, var(--periscope-font-size-base, 13px));
-	box-shadow: var(--input-box-shadow, none);
-	color: inherit;
-}

frontend/src/container/FormAlertChannels/FormField.module.scss

@@ -1,8 +1,8 @@
 .field {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3);
-	margin-bottom: var(--spacing-6);
+	gap: var(--spacing-1);
+	margin-bottom: var(--spacing-4);
 }
 
 .label {

frontend/src/container/FormAlertChannels/Settings/IncidentIo.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Controller, useFormContext } from 'react-hook-form';
-import { Plus } from '@signozhq/icons';
+import { Minus, Plus } from '@signozhq/icons';
 import { Input } from '@signozhq/ui/input';
 import { Button } from '@signozhq/ui/button';
 import { Input as AntdInput } from 'antd';
@@ -10,7 +10,6 @@ import { Typography } from '@signozhq/ui/typography';
 import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 import FormCard from '../FormCard';
 import FormField from '../FormField';
-import RowEntry from './RowEntry';
 import styles from './RowEditor.module.scss';
 
 const { TextArea } = AntdInput;
@@ -140,19 +139,10 @@ function IncidentIOSettings({ initialMetadata }: IncidentIOProps): JSX.Element {
 					help={t('help_incidentio_metadata')}
 				>
 					{metadataRows.map((row, index) => (
-						<RowEntry
-							// rows have no stable identity beyond their position
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-							index={index}
-							noun={t('entry_incidentio_metadata')}
-							removeLabel={t('button_incidentio_remove_metadata')}
-							removeTestId={`incidentio-metadata-remove-${index}`}
-							onRemove={(): void =>
-								syncMetadata(metadataRows.filter((_, i) => i !== index))
-							}
-						>
-							<FormField label={t('label_incidentio_metadata_key')}>
+						// rows have no stable identity beyond their position
+						// eslint-disable-next-line react/no-array-index-key
+						<div key={index} className={styles.row}>
+							<div className={styles.field}>
 								<Input
 									placeholder={t('placeholder_incidentio_metadata_key')}
 									value={row.key}
@@ -165,9 +155,8 @@ function IncidentIOSettings({ initialMetadata }: IncidentIOProps): JSX.Element {
 									}
 									data-testid={`incidentio-metadata-key-${index}`}
 								/>
-							</FormField>
-
-							<FormField label={t('label_incidentio_metadata_value')}>
+							</div>
+							<div className={styles.field}>
 								<Input
 									placeholder={t('placeholder_incidentio_metadata_value')}
 									value={row.value}
@@ -180,10 +169,22 @@ function IncidentIOSettings({ initialMetadata }: IncidentIOProps): JSX.Element {
 									}
 									data-testid={`incidentio-metadata-value-${index}`}
 								/>
-							</FormField>
-						</RowEntry>
+							</div>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="sm"
+								icon
+								aria-label={t('button_incidentio_remove_metadata')}
+								onClick={(): void =>
+									syncMetadata(metadataRows.filter((_, i) => i !== index))
+								}
+								testId={`incidentio-metadata-remove-${index}`}
+							>
+								<Minus size={14} />
+							</Button>
+						</div>
 					))}
-
 					<div className={styles.add}>
 						<Button
 							variant="dashed"

frontend/src/container/FormAlertChannels/Settings/RowEditor.module.scss

@@ -1,10 +1,3 @@
-/* One height for every control a repeating row renders, so the remove button,
-   the add button and the inputs beside them agree. */
-.entry,
-.add {
-	--row-control-height: 28px;
-}
-
 .row {
 	display: flex;
 	align-items: center;
@@ -30,9 +23,7 @@
 }
 
 .add {
-	/* Sits with the blocks it adds to, not against the next field's label. */
-	margin-top: var(--spacing-2);
-	--button-height: var(--row-control-height);
+	margin-top: var(--spacing-1);
 }
 
 @media (max-width: 720px) {
@@ -44,52 +35,3 @@
 		max-width: none;
 	}
 }
-
-/* One entry per block, every input labelled. A row of bare boxes gave no way to
-   tell which column was which once a value was typed. The block keeps a readable
-   width while the rest of the form fills the page, so its two columns do not
-   stretch into a row of six. */
-.entry {
-	max-width: 760px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-2);
-	background: var(--l2-background);
-	padding: var(--spacing-6) var(--spacing-7);
-	margin-bottom: var(--spacing-4);
-}
-
-.entryTop {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: var(--spacing-4);
-
-	/* The remove control is an icon button, so give it the height the design
-	   system gives a small control rather than letting the glyph set it. */
-	--button-height: var(--row-control-height);
-	--button-icon-size: 14px;
-}
-
-.entryIndex {
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--muted-foreground);
-}
-
-.entryGrid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-	gap: 0 var(--spacing-6);
-}
-
-/* The toggle reads as a sentence, so it takes the whole width rather than
-   sitting in a column sized for an input. */
-.entryWide {
-	grid-column: 1 / -1;
-}
-
-@media (max-width: 720px) {
-	.entryGrid {
-		grid-template-columns: minmax(0, 1fr);
-	}
-}

frontend/src/container/FormAlertChannels/Settings/RowEntry.tsx

@@ -1,50 +0,0 @@
-import { ReactNode } from 'react';
-import { Minus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './RowEditor.module.scss';
-
-interface RowEntryProps {
-	/** Zero-based; shown to the reader as a count from one. */
-	index: number;
-	/** Singular noun for one entry, such as "Field" or "Action". */
-	noun: string;
-	removeLabel: string;
-	removeTestId: string;
-	onRemove: () => void;
-	children: ReactNode;
-}
-
-function RowEntry({
-	index,
-	noun,
-	removeLabel,
-	removeTestId,
-	onRemove,
-	children,
-}: RowEntryProps): JSX.Element {
-	return (
-		<div className={styles.entry}>
-			<div className={styles.entryTop}>
-				<Typography.Text size="sm" className={styles.entryIndex}>
-					{noun} {index + 1}
-				</Typography.Text>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					icon
-					aria-label={removeLabel}
-					onClick={onRemove}
-					testId={removeTestId}
-				>
-					<Minus size={14} />
-				</Button>
-			</div>
-			<div className={styles.entryGrid}>{children}</div>
-		</div>
-	);
-}
-
-export default RowEntry;

frontend/src/container/FormAlertChannels/Settings/Slack.tsx

@@ -42,9 +42,7 @@ function Slack(): JSX.Element {
 				>
 					<Input {...register('channel')} data-testid="slack-channel-textbox" />
 				</FormField>
-			</FormCard>
 
-			<FormCard title={t('section_message')}>
 				<FormField label={t('field_slack_title')} error={errors.title?.message}>
 					<Controller
 						control={control}
@@ -84,12 +82,7 @@ function Slack(): JSX.Element {
 						)}
 					/>
 				</FormField>
-			</FormCard>
 
-			<FormCard
-				title={t('section_advanced')}
-				description={t('description_slack_advanced')}
-			>
 				<FormField
 					label={t('field_slack_color')}
 					help={t('help_slack_color')}

frontend/src/container/FormAlertChannels/Settings/SlackActions.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import { Plus } from '@signozhq/icons';
+import { Minus, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
 import { AlertmanagertypesChannelSlackActionDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 import FormField from '../FormField';
-import RowEntry from './RowEntry';
 import styles from './RowEditor.module.scss';
 
 /** `confirm` is an object on the DTO, so its one editable field is reached by path. */
@@ -29,37 +29,49 @@ function SlackActions(): JSX.Element {
 	const { control, register } = useFormContext<ChannelSpecFormValues>();
 	const { fields, append, remove } = useFieldArray({ control, name: 'actions' });
 
-	const keyFor = (column: ActionColumn): string => column.replace('.text', '');
+	const labelFor = (column: ActionColumn): string =>
+		t(`label_slack_action_${column.replace('.text', '')}`);
 
 	return (
-		<FormField
-			label={t('field_slack_actions')}
-			tooltip={t('tooltip_slack_actions')}
-		>
+		<FormField label={t('field_slack_actions')} help={t('help_slack_actions')}>
 			<div>
-				{fields.map((row, index) => (
-					<RowEntry
-						key={row.id}
-						index={index}
-						noun={t('entry_slack_action')}
-						removeLabel={t('remove_slack_action')}
-						removeTestId={`slack-action-remove-${index}`}
-						onRemove={(): void => remove(index)}
-					>
+				{fields.length > 0 && (
+					<div className={styles.row}>
 						{COLUMNS.map((column) => (
-							<FormField
-								key={column}
-								label={t(`label_slack_action_${keyFor(column)}`)}
-								tooltip={t(`tooltip_slack_action_${keyFor(column)}`)}
-							>
+							<div key={column} className={styles.field}>
+								<Typography.Text size="sm" className={styles.heading}>
+									{labelFor(column)}
+								</Typography.Text>
+							</div>
+						))}
+					</div>
+				)}
+
+				{fields.map((row, index) => (
+					<div key={row.id} className={styles.row}>
+						{COLUMNS.map((column) => (
+							<div key={column} className={styles.field}>
 								<Input
 									{...register(`actions.${index}.${column}` as const)}
-									placeholder={t(`placeholder_slack_action_${keyFor(column)}`)}
-									testId={`slack-action-${keyFor(column)}-${index}`}
+									placeholder={t(
+										`placeholder_slack_action_${column.replace('.text', '')}`,
+									)}
+									testId={`slack-action-${column.replace('.text', '')}-${index}`}
 								/>
-							</FormField>
+							</div>
 						))}
-					</RowEntry>
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="sm"
+							icon
+							aria-label={t('remove_slack_action')}
+							onClick={(): void => remove(index)}
+							testId={`slack-action-remove-${index}`}
+						>
+							<Minus size={14} />
+						</Button>
+					</div>
 				))}
 			</div>
 

frontend/src/container/FormAlertChannels/Settings/SlackFields.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
-import { Plus } from '@signozhq/icons';
+import { Minus, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Input } from '@signozhq/ui/input';
@@ -8,7 +8,6 @@ import { Typography } from '@signozhq/ui/typography';
 
 import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 import FormField from '../FormField';
-import RowEntry from './RowEntry';
 import styles from './RowEditor.module.scss';
 
 // Slack renders these as the attachment's table of short or full-width entries.
@@ -18,61 +17,52 @@ function SlackFields(): JSX.Element {
 	const { fields, append, remove } = useFieldArray({ control, name: 'fields' });
 
 	return (
-		<FormField
-			label={t('field_slack_fields')}
-			tooltip={t('tooltip_slack_fields')}
-		>
+		<FormField label={t('field_slack_fields')} help={t('help_slack_fields')}>
 			<div>
 				{fields.map((row, index) => (
-					<RowEntry
-						key={row.id}
-						index={index}
-						noun={t('entry_slack_field')}
-						removeLabel={t('remove_slack_field')}
-						removeTestId={`slack-field-remove-${index}`}
-						onRemove={(): void => remove(index)}
-					>
-						<FormField
-							label={t('label_slack_field_title')}
-							tooltip={t('tooltip_slack_field_title')}
-						>
+					<div key={row.id} className={styles.row}>
+						<div className={styles.field}>
 							<Input
 								{...register(`fields.${index}.title`)}
 								placeholder={t('placeholder_slack_field_title')}
 								testId={`slack-field-title-${index}`}
 							/>
-						</FormField>
-
-						<FormField
-							label={t('label_slack_field_value')}
-							tooltip={t('tooltip_slack_field_value')}
-						>
+						</div>
+						<div className={styles.field}>
 							<Input
 								{...register(`fields.${index}.value`)}
 								placeholder={t('placeholder_slack_field_value')}
 								testId={`slack-field-value-${index}`}
 							/>
-						</FormField>
-
-						<div className={styles.entryWide}>
-							<Controller
-								control={control}
-								name={`fields.${index}.short`}
-								render={({ field }): JSX.Element => (
-									<Checkbox
-										color="primary"
-										value={!!field.value}
-										onChange={(checked): void => field.onChange(checked === true)}
-										testId={`slack-field-short-${index}`}
-									>
-										<Typography.Text size="sm">
-											{t('field_slack_field_short')}
-										</Typography.Text>
-									</Checkbox>
-								)}
-							/>
 						</div>
-					</RowEntry>
+						<Controller
+							control={control}
+							name={`fields.${index}.short`}
+							render={({ field }): JSX.Element => (
+								<Checkbox
+									color="primary"
+									value={!!field.value}
+									onChange={(checked): void => field.onChange(checked === true)}
+									testId={`slack-field-short-${index}`}
+								>
+									<Typography.Text size="sm">
+										{t('field_slack_field_short')}
+									</Typography.Text>
+								</Checkbox>
+							)}
+						/>
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="sm"
+							icon
+							aria-label={t('remove_slack_field')}
+							onClick={(): void => remove(index)}
+							testId={`slack-field-remove-${index}`}
+						>
+							<Minus size={14} />
+						</Button>
+					</div>
 				))}
 			</div>
 

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

@@ -24,7 +24,6 @@ describe('FormAlertChannels', () => {
 				onTypeChangeHandler={jest.fn()}
 				onSaveHandler={jest.fn()}
 				onTestHandler={jest.fn()}
-				onDiscardHandler={jest.fn()}
 				testingState={false}
 				savingState={false}
 				editing

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,7 +1,6 @@
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Controller, FormProvider, UseFormReturn } from 'react-hook-form';
-import { X } from '@signozhq/icons';
 import { Input } from '@signozhq/ui/input';
 import { SelectSimple } from '@signozhq/ui/select';
 import { Switch } from '@signozhq/ui/switch';
@@ -49,12 +48,10 @@ function FormAlertChannels({
 	onTypeChangeHandler,
 	onTestHandler,
 	onSaveHandler,
-	onDiscardHandler,
 	savingState,
 	testingState,
 	editing = false,
 	readOnly = false,
-	hasChanges = true,
 	saveChecks = [],
 	testChecks = [],
 }: FormAlertChannelsProps): JSX.Element {
@@ -118,10 +115,7 @@ function FormAlertChannels({
 								/>
 							</FormField>
 
-							<FormField
-								label={t('field_send_resolved')}
-								tooltip={t('tooltip_send_resolved')}
-							>
+							<FormField label={t('field_send_resolved')}>
 								<Controller
 									control={control}
 									name="sendResolved"
@@ -137,11 +131,7 @@ function FormAlertChannels({
 								/>
 							</FormField>
 
-							<FormField
-								label={t('field_channel_type')}
-								tooltip={t('tooltip_channel_type')}
-								htmlFor="channel-type"
-							>
+							<FormField label={t('field_channel_type')} htmlFor="channel-type">
 								<SelectSimple
 									id="channel-type"
 									items={CHANNEL_TYPE_OPTIONS}
@@ -158,45 +148,30 @@ function FormAlertChannels({
 				</fieldset>
 
 				<div className={styles.actions}>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						testId="discard-channel-button"
-						prefix={<X size={14} />}
-						onClick={onDiscardHandler}
-					>
-						{t('button_discard_channel')}
-					</Button>
-
-					<div className={styles.actionGroup}>
-						<AuthZTooltip checks={testChecks}>
-							<Button
-								variant="outlined"
-								color="secondary"
-								size="md"
-								testId="test-channel-button"
-								loading={testingState}
-								onClick={onTestHandler}
-							>
-								{t('button_test_channel')}
-							</Button>
-						</AuthZTooltip>
-						<AuthZTooltip checks={saveChecks}>
-							<Button
-								variant="solid"
-								color="primary"
-								size="md"
-								testId="save-channel-button"
-								loading={savingState}
-								disabled={!hasChanges}
-								disabledTooltip={t('tooltip_save_no_changes')}
-								onClick={onSaveHandler}
-							>
-								{t('button_save_channel')}
-							</Button>
-						</AuthZTooltip>
-					</div>
+					<AuthZTooltip checks={saveChecks}>
+						<Button
+							variant="solid"
+							color="primary"
+							size="md"
+							testId="save-channel-button"
+							loading={savingState}
+							onClick={onSaveHandler}
+						>
+							{t('button_save_channel')}
+						</Button>
+					</AuthZTooltip>
+					<AuthZTooltip checks={testChecks}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="md"
+							testId="test-channel-button"
+							loading={testingState}
+							onClick={onTestHandler}
+						>
+							{t('button_test_channel')}
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</form>
 		</FormProvider>
@@ -209,15 +184,12 @@ interface FormAlertChannelsProps {
 	onTypeChangeHandler: (value: ChannelKind) => void;
 	onSaveHandler: () => void;
 	onTestHandler: () => void;
-	onDiscardHandler: () => void;
 	testingState: boolean;
 	savingState: boolean;
 	// editing indicates if the form is opened in edit mode
 	editing?: boolean;
 	/** The reader has `read` but not `update`, so the fields render disabled. */
 	readOnly?: boolean;
-	/** Nothing edited yet, so there is nothing to save and nothing to discard. */
-	hasChanges?: boolean;
 	/** Gates saving; a denial disables the button and names the missing scope. */
 	saveChecks?: BrandedPermission[];
 	/** Gates a test send, which the API allows with `create`. */
@@ -227,7 +199,6 @@ interface FormAlertChannelsProps {
 FormAlertChannels.defaultProps = {
 	editing: undefined,
 	readOnly: false,
-	hasChanges: true,
 	saveChecks: [],
 	testChecks: [],
 };

frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx

@@ -1,7 +1,6 @@
 import type { TracesTableRow } from '../TracesTable/getFieldColumn';
 import { generatePath } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { TraceDetailsTab } from 'pages/TraceDetailsV3/constants';
 import { formUrlParams } from 'utils/traceUtils';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
@@ -21,7 +20,6 @@ export const getTraceLink = (record: Record<string, unknown>): string => {
 	}
 
 	return `${generatePath(ROUTES.TRACE_DETAIL, { id: traceId })}${formUrlParams({
-		tab: TraceDetailsTab.Thread,
 		spanId,
 		levelUp: 0,
 		levelDown: 0,

frontend/src/container/LLMObservability/Explorer/TracesTable/FieldCell.tsx

@@ -3,7 +3,6 @@ import { Badge } from '@signozhq/ui/badge';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { TraceDetailsTab } from 'pages/TraceDetailsV3/constants';
 import { getMs } from 'utils/timeUtils';
 import { useTimezone } from 'providers/Timezone';
 
@@ -45,10 +44,7 @@ function FieldCell({ name, value }: FieldCellProps): JSX.Element {
 	if (TRACE_ID_FIELD_NAMES.has(name)) {
 		return (
 			<Link
-				to={{
-					pathname: generatePath(ROUTES.TRACE_DETAIL, { id: text }),
-					search: `?tab=${TraceDetailsTab.Thread}`,
-				}}
+				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
 				data-testid="trace-id"
 				onClick={(e): void => e.stopPropagation()}
 			>

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.actions.test.tsx

@@ -2,7 +2,6 @@ import userEvent from '@testing-library/user-event';
 import { logEventMock } from '__tests__/logEventMock';
 import { safeNavigateMock } from '__tests__/safeNavigateMock';
 import { server } from 'mocks-server/server';
-import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
 import { rest } from 'msw';
 import { screen, waitFor } from 'tests/test-utils';
 
@@ -122,26 +121,22 @@ describe('ListAlertRules — actions menu', () => {
 		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
 	});
 
-	it('clone action: sends POST to clone endpoint and opens the cloned rule returned by the API', async () => {
-		let capturedRuleId: string | null = null;
+	it('clone action: sends POST with " - Copy" suffix and opens the cloned rule returned by the API', async () => {
+		let capturedPostBody: unknown = null;
 		server.use(
-			rest.post(
-				'http://localhost/api/v2/rules/:id/clone',
-				async (req, res, ctx) => {
-					capturedRuleId = req.params.id as string;
-					return res(
-						ctx.status(201),
-						ctx.json({
-							data: {
-								...alertRulesFixture[0],
-								id: 'cloned-from-server',
-								alert: 'High CPU Alert - Copy',
-							},
-							status: 'success',
-						}),
-					);
-				},
-			),
+			rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
+				capturedPostBody = await req.json();
+				return res(
+					ctx.status(201),
+					ctx.json({
+						data: {
+							...(capturedPostBody as Record<string, unknown>),
+							id: 'cloned-from-server',
+						},
+						status: 'success',
+					}),
+				);
+			}),
 		);
 
 		renderListAlertRules();
@@ -150,7 +145,9 @@ describe('ListAlertRules — actions menu', () => {
 		await clickMenuItem('Clone');
 
 		await waitFor(() => {
-			expect(capturedRuleId).toBe('rule-1');
+			expect(capturedPostBody).toStrictEqual(
+				expect.objectContaining({ alert: 'High CPU Alert - Copy' }),
+			);
 		});
 
 		// The id from the server response round-trips into the navigate URL — this

frontend/src/container/ListAlertRules/components/ActionsMenu.tsx

@@ -6,10 +6,10 @@ import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
+	createRule,
 	deleteRuleByID,
 	invalidateListRules,
 	patchRuleByID,
-	cloneRuleByID,
 } from 'api/generated/services/rules';
 import type {
 	RenderErrorResponseDTO,
@@ -62,9 +62,10 @@ function ActionsMenu({ rule, onEdit }: ActionsMenuProps): JSX.Element {
 	const handleClone = useCallback((): void => {
 		alertActionLogEvent(ALERT_ACTIONS.CLONE, rule);
 		toast.promise(
-			cloneRuleByID({
-				id: rule.id,
-			}).then(async (response) => {
+			createRule({
+				...rule,
+				alert: `${rule.alert} - Copy`,
+			} as RuletypesPostableRuleDTO).then(async (response) => {
 				await invalidateListRules(queryClient);
 				const newRule = response.data;
 				if (newRule) {

frontend/src/container/ListAlertRules/components/ColumnSelector.tsx

@@ -3,21 +3,23 @@ import { Columns3 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import {
+	hideColumn,
+	showColumn,
+	useHiddenColumnIds,
+} from 'components/TanStackTableView';
+
 import styles from './ColumnSelector.module.scss';
-import type { TableColumnDef } from './types';
-import { hideColumn, showColumn, useHiddenColumnIds } from './useColumnStore';
 
 interface ColumnSelectorProps<TData> {
 	columns: TableColumnDef<TData>[];
-	/** Shared with the table's `columnStorageKey`, which is what it writes to. */
 	storageKey: string;
-	testId?: string;
 }
 
 function ColumnSelector<TData>({
 	columns,
 	storageKey,
-	testId = 'column-selector-button',
 }: ColumnSelectorProps<TData>): JSX.Element {
 	const hiddenColumnIds = useHiddenColumnIds(storageKey);
 
@@ -45,7 +47,7 @@ function ColumnSelector<TData>({
 					size="sm"
 					color="secondary"
 					prefix={<Columns3 size={14} />}
-					testId={testId}
+					testId="alert-columns-button"
 				>
 					Columns
 				</Button>
@@ -75,8 +77,4 @@ function ColumnSelector<TData>({
 	);
 }
 
-ColumnSelector.defaultProps = {
-	testId: 'column-selector-button',
-};
-
 export default ColumnSelector;

frontend/src/container/ListAlertRules/components/index.ts

@@ -1 +1,2 @@
 export { default as ActionsMenu } from './ActionsMenu';
+export { default as ColumnSelector } from './ColumnSelector';

frontend/src/container/ListAlertRules/index.tsx

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
 import NoResultsEmptyState from 'components/Alerts/NoResultsEmptyState';
-import TanStackTable, { ColumnSelector } from 'components/TanStackTableView';
+import TanStackTable from 'components/TanStackTableView';
 import { useCalculatedPageSize } from 'components/TanStackTableView/useCalculatedPageSize';
 import { useTableParams } from 'components/TanStackTableView/useTableParams';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -15,7 +15,7 @@ import { useTimezone } from 'providers/Timezone';
 import TextToolTip from 'components/TextToolTip';
 
 import { AlertsEmptyState } from './AlertsEmptyState/AlertsEmptyState';
-import { ActionsMenu } from './components';
+import { ActionsMenu, ColumnSelector } from './components';
 import { ALERT_RULES_PARAMS, useAlertRulesFilters } from './hooks';
 import styles from './ListAlertRules.module.scss';
 import { getAlertRuleColumns } from './table.config';
@@ -134,11 +134,7 @@ function ListAlertRules(): JSX.Element {
 			{!isEmptyNoRules && (
 				<div className={styles.header}>
 					<div className={styles.refreshRow}>
-						<ColumnSelector
-							columns={columns}
-							storageKey="alert-rules-columns"
-							testId="alert-columns-button"
-						/>
+						<ColumnSelector columns={columns} storageKey="alert-rules-columns" />
 						{addNewAlert && (
 							<Button
 								variant="solid"

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -28,6 +28,7 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		TRACE: false,
 		BAR: true,
 		AREA: true,
+		SCATTER: false,
 		PIE: false,
 		HISTOGRAM: false,
 		HEATMAP: false,

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -16,6 +16,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	// Dashboards v2 renders this kind; the V1 wrapper map is never asked for it.
 	[PANEL_TYPES.TEXT]: null,
+	[PANEL_TYPES.SCATTER]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,

frontend/src/hooks/trace/__tests__/useCopySpanLink.test.tsx

@@ -1,58 +0,0 @@
-import { MouseEvent, ReactNode } from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { renderHook } from '@testing-library/react';
-import {
-	__resetSearchParamsGetter,
-	__setSearchParamsGetterForTest,
-} from 'utils/getUnstableCurrentSearchParams';
-
-import { useCopySpanLink } from '../useCopySpanLink';
-
-const mockCopy = jest.fn();
-
-jest.mock('react-use', () => ({
-	__esModule: true,
-	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopy],
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	toast: { success: jest.fn() },
-}));
-
-// The router only knows the stale URL; nuqs has since written ?tab=thread.
-const wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
-	<MemoryRouter initialEntries={['/trace/abc?tab=overview&spanId=old']}>
-		{children}
-	</MemoryRouter>
-);
-
-const clickEvent = {
-	preventDefault: jest.fn(),
-	stopPropagation: jest.fn(),
-} as unknown as MouseEvent<HTMLElement>;
-
-describe('useCopySpanLink', () => {
-	beforeEach(() => {
-		mockCopy.mockClear();
-		__setSearchParamsGetterForTest(
-			() => new URLSearchParams('tab=thread&spanId=old'),
-		);
-	});
-
-	afterEach(() => {
-		__resetSearchParamsGetter();
-	});
-
-	it('builds the link from the live URL, keeping its tab', () => {
-		const { result } = renderHook(() => useCopySpanLink({ span_id: 'new' }), {
-			wrapper,
-		});
-
-		result.current.onSpanCopy(clickEvent);
-
-		const link = new URL(mockCopy.mock.calls[0][0]);
-		expect(link.pathname).toBe('/trace/abc');
-		expect(link.searchParams.get('tab')).toBe('thread');
-		expect(link.searchParams.get('spanId')).toBe('new');
-	});
-});

frontend/src/hooks/trace/useCopySpanLink.ts

@@ -2,8 +2,8 @@ import { MouseEventHandler, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from '@signozhq/ui/sonner';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { getAbsoluteUrl } from 'utils/basePath';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
 
 // Accepts both V2 (spanId) and V3 (span_id) span shapes
 // TODO: Remove V2 (spanId) support when phasing out V2
@@ -15,6 +15,7 @@ interface SpanLike {
 export const useCopySpanLink = (
 	span?: SpanLike,
 ): { onSpanCopy: MouseEventHandler<HTMLElement> } => {
+	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
 	const [, setCopy] = useCopyToClipboard();
 
@@ -27,22 +28,21 @@ export const useCopySpanLink = (
 			event.preventDefault();
 			event.stopPropagation();
 
-			const params = getUnstableCurrentSearchParams();
-			params.delete('spanId');
+			urlQuery.delete('spanId');
 
 			const id = span.span_id || span.spanId;
 			if (id) {
-				params.set('spanId', id);
+				urlQuery.set('spanId', id);
 			}
 
-			const link = getAbsoluteUrl(`${pathname}?${params.toString()}`);
+			const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);
 
 			setCopy(link);
 			toast.success('Copied to clipboard', {
 				position: 'top-right',
 			});
 		},
-		[span, pathname, setCopy],
+		[span, urlQuery, pathname, setCopy],
 	);
 
 	return {

frontend/src/lib/monaco/jsonEditorTheme.ts

@@ -22,17 +22,12 @@ export function defineJsonEditorTheme(monaco: Monaco, el: HTMLElement): void {
 	const keyColor = token(el, '--bg-vanilla-400');
 	const valueColor = token(el, '--bg-robin-400');
 
-	// Both token colours are picked to read on a dark surface, so on a light one
-	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
-	// for that surface, so let it keep its colours there, as the role viewer does.
 	const rules: { token: string; foreground: string }[] = [];
-	if (isDark(background)) {
-		if (keyColor) {
-			rules.push({ token: 'string.key.json', foreground: keyColor });
-		}
-		if (valueColor) {
-			rules.push({ token: 'string.value.json', foreground: valueColor });
-		}
+	if (keyColor) {
+		rules.push({ token: 'string.key.json', foreground: keyColor });
+	}
+	if (valueColor) {
+		rules.push({ token: 'string.value.json', foreground: valueColor });
 	}
 
 	const colors: Record<string, string> = {};

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -14,6 +14,7 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.AREA]: 'area';
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
+	[PANEL_TYPES.SCATTER]: 'scatter';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
 	[PANEL_TYPES.HEATMAP]: 'heatmap';
 };
@@ -150,6 +151,7 @@ export const panelTypeDataSourceFormValuesMap: Record<
 	[PANEL_TYPES.HEATMAP]: bySource(HEATMAP, HEATMAP_METRICS),
 	[PANEL_TYPES.TABLE]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.PIE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.SCATTER]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.VALUE]: bySource(SINGLE_VALUE, SINGLE_VALUE_METRICS),
 	[PANEL_TYPES.LIST]: bySource(RAW_ROWS, RAW_ROWS_METRICS),
 };

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.module.scss

@@ -0,0 +1,94 @@
+// Sections own the padding so the footer spans edge to edge.
+.container {
+	// Same inset as the heatmap tooltip.
+	--gutter: 14px;
+
+	font-family: 'Inter';
+	font-size: 12px;
+	background: var(--l2-background);
+	-webkit-font-smoothing: antialiased;
+	color: var(--l2-foreground);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+	display: flex;
+	flex-direction: column;
+	min-width: 220px;
+
+	&.pinned {
+		border-color: var(--ring);
+	}
+}
+
+.divider {
+	display: block;
+	width: 100%;
+	height: 1px;
+	background-color: var(--l2-border);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: var(--spacing-6) var(--gutter);
+}
+
+// Matches the legend row's marker.
+.marker {
+	box-sizing: border-box;
+	width: 12px;
+	height: 12px;
+	border: 1.5px solid;
+	border-radius: var(--radius);
+	flex-shrink: 0;
+}
+
+.title {
+	flex: 1;
+	min-width: 0;
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	font-weight: 600;
+	color: var(--text-vanilla-100);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-5) var(--gutter);
+}
+
+.row {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	font-variant-numeric: tabular-nums;
+	color: var(--text-vanilla-100);
+}
+
+.rowMuted {
+	color: var(--text-vanilla-400);
+}
+
+.rowLabel {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rowValue {
+	flex: 0 0 auto;
+	max-width: 60%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.tsx

@@ -0,0 +1,139 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import { Pin } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import { ScatterTooltipProps } from '../types';
+import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
+
+import Styles from './ScatterTooltip.module.scss';
+
+/** Own component: the shared Tooltip lists one row per series at a shared x. */
+export default function ScatterTooltip({
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	channels,
+	resolvePointGroupValues,
+	decimalPrecision,
+	isPinned,
+	dismiss,
+	renderTooltipFooter,
+}: ScatterTooltipProps): JSX.Element | null {
+	const hoveredPoint = useMemo(
+		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
+		[uPlotInstance, seriesIndex, dataIndexes],
+	);
+
+	const rows = useMemo(
+		() =>
+			hoveredPoint
+				? buildChannelRows(hoveredPoint, channels, decimalPrecision)
+				: [],
+		[hoveredPoint, channels, decimalPrecision],
+	);
+
+	const labels = useMemo(
+		() =>
+			hoveredPoint
+				? (resolvePointGroupValues?.(
+						hoveredPoint.seriesIndex,
+						hoveredPoint.dataIndex,
+					) ?? [])
+				: [],
+		[hoveredPoint, resolvePointGroupValues],
+	);
+
+	if (!hoveredPoint) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
+			data-pinned={isPinned}
+			data-testid="scatter-tooltip"
+		>
+			<div className={Styles.header}>
+				<span
+					className={Styles.marker}
+					style={{
+						backgroundColor: hoveredPoint.color,
+						borderColor: hoveredPoint.color,
+					}}
+				/>
+				<Typography.Text
+					as="span"
+					className={Styles.title}
+					title={hoveredPoint.label}
+					testId="scatter-tooltip-title"
+				>
+					{hoveredPoint.label}
+				</Typography.Text>
+				{isPinned && (
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						prefix={<Pin size={12} />}
+						testId="scatter-tooltip-status"
+					>
+						Pinned
+					</Button>
+				)}
+			</div>
+
+			<span className={Styles.divider} />
+
+			<div className={Styles.rows}>
+				{rows.map((row) => (
+					<div
+						key={row.label}
+						className={Styles.row}
+						data-testid="scatter-tooltip-row"
+					>
+						<Typography.Text as="span" className={Styles.rowLabel}>
+							{row.label}
+						</Typography.Text>
+						<Typography.Text as="span" className={Styles.rowValue}>
+							{row.value}
+						</Typography.Text>
+					</div>
+				))}
+			</div>
+
+			{labels.length > 0 && (
+				<>
+					<span className={Styles.divider} />
+					<div className={Styles.rows}>
+						{labels.map((label) => (
+							<div
+								key={label.key}
+								className={cx(Styles.row, Styles.rowMuted)}
+								data-testid="scatter-tooltip-label"
+							>
+								<Typography.Text
+									as="span"
+									className={Styles.rowLabel}
+									title={label.key}
+								>
+									{label.key}
+								</Typography.Text>
+								<Typography.Text
+									as="span"
+									className={Styles.rowValue}
+									title={label.value}
+								>
+									{label.value}
+								</Typography.Text>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+
+			{renderTooltipFooter?.({ isPinned, dismiss })}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/scatterTooltipContent.test.ts

@@ -0,0 +1,107 @@
+import type uPlot from 'uplot';
+
+import {
+	buildChannelRows,
+	resolveHoveredPoint,
+	ScatterHoveredPoint,
+} from '../scatterTooltipContent';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getToolTipValue: jest.fn((value: number | string, unit?: string) =>
+		`${value} ${unit ?? ''}`.trim(),
+	),
+}));
+
+const plot = {
+	data: [
+		null,
+		[
+			[10, 20],
+			[100, 200],
+			[5, null],
+		],
+		[[30], [300]],
+	],
+	series: [
+		{},
+		{ label: 'cart', stroke: '#ff0000' },
+		{ label: 'checkout', stroke: (): string => '#00ff00' },
+	],
+} as unknown as uPlot;
+
+describe('resolveHoveredPoint', () => {
+	it('reads the focused series at its own data index', () => {
+		expect(resolveHoveredPoint(plot, 1, [null, 1, null])).toStrictEqual({
+			seriesIndex: 1,
+			dataIndex: 1,
+			label: 'cart',
+			color: '#ff0000',
+			x: 20,
+			y: 200,
+			size: null,
+		});
+	});
+
+	it('carries the size column when present and resolves function strokes', () => {
+		expect(resolveHoveredPoint(plot, 1, [null, 0, null])?.size).toBe(5);
+		expect(resolveHoveredPoint(plot, 2, [null, null, 0])).toMatchObject({
+			label: 'checkout',
+			color: '#00ff00',
+			size: null,
+		});
+	});
+
+	it('is null without a focused series or an index for it', () => {
+		expect(resolveHoveredPoint(plot, null, [null, 0, null])).toBeNull();
+		expect(resolveHoveredPoint(plot, 0, [0, 0, null])).toBeNull();
+		expect(resolveHoveredPoint(plot, 1, [null, null, null])).toBeNull();
+	});
+});
+
+describe('buildChannelRows', () => {
+	const point: ScatterHoveredPoint = {
+		seriesIndex: 1,
+		dataIndex: 0,
+		label: 'cart',
+		color: '#f00',
+		x: 12,
+		y: 340,
+		size: 7,
+	};
+
+	it('formats x and y with their own units', () => {
+		const rows = buildChannelRows(point, {
+			x: { label: 'Throughput', unit: 'reqps' },
+			y: { label: 'p99', unit: 'ms' },
+		});
+
+		expect(rows).toStrictEqual([
+			{ label: 'Throughput', value: '12 reqps' },
+			{ label: 'p99', value: '340 ms' },
+		]);
+	});
+
+	it('adds the size row only when the channel is mapped and the point has one', () => {
+		const channels = {
+			x: { label: 'x' },
+			y: { label: 'y' },
+			size: { label: 'Errors' },
+		};
+
+		expect(buildChannelRows(point, channels)).toHaveLength(3);
+		expect(buildChannelRows({ ...point, size: null }, channels)).toHaveLength(2);
+	});
+
+	it('leaves out a size row that repeats the x row', () => {
+		const rows = buildChannelRows(
+			{ ...point, size: point.x },
+			{
+				x: { label: 'A.count()' },
+				y: { label: 'p99' },
+				size: { label: 'A.count()' },
+			},
+		);
+
+		expect(rows.map((row) => row.label)).toStrictEqual(['A.count()', 'p99']);
+	});
+});

frontend/src/lib/uPlotV2/components/Tooltip/scatterTooltipContent.ts

@@ -0,0 +1,97 @@
+import { PrecisionOption } from 'components/Graph/types';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import type uPlot from 'uplot';
+
+import type {
+	ScatterChannel,
+	ScatterChannels,
+	ScatterSeriesData,
+} from '../../plugins/ScatterPlugin/types';
+import { resolveSeriesColor } from './utils';
+
+export interface ScatterHoveredPoint {
+	seriesIndex: number;
+	dataIndex: number;
+	label: string;
+	color: string;
+	x: number;
+	y: number;
+	size: number | null;
+}
+
+export interface ScatterTooltipRow {
+	label: string;
+	value: string;
+}
+
+export function resolveHoveredPoint(
+	u: uPlot,
+	seriesIndex: number | null,
+	dataIndexes: Array<number | null>,
+): ScatterHoveredPoint | null {
+	if (seriesIndex == null || seriesIndex < 1) {
+		return null;
+	}
+	const dataIndex = dataIndexes[seriesIndex];
+	const series = u.series[seriesIndex];
+	const columns = u.data[seriesIndex] as unknown as
+		| ScatterSeriesData
+		| undefined;
+	if (dataIndex == null || !series || !columns) {
+		return null;
+	}
+	const x = columns[0][dataIndex];
+	const y = columns[1][dataIndex];
+	if (x == null || y == null) {
+		return null;
+	}
+	return {
+		seriesIndex,
+		dataIndex,
+		label: String(series.label ?? ''),
+		color: resolveSeriesColor(series.stroke, u, seriesIndex),
+		x,
+		y,
+		size: columns[2]?.[dataIndex] ?? null,
+	};
+}
+
+function formatChannel(
+	value: number,
+	channel: ScatterChannel,
+	decimalPrecision?: PrecisionOption,
+): string {
+	return getToolTipValue(value, channel.unit, decimalPrecision);
+}
+
+export function buildChannelRows(
+	point: ScatterHoveredPoint,
+	channels: ScatterChannels,
+	decimalPrecision?: PrecisionOption,
+): ScatterTooltipRow[] {
+	const rows: ScatterTooltipRow[] = [
+		{
+			label: channels.x.label,
+			value: formatChannel(point.x, channels.x, decimalPrecision),
+		},
+		{
+			label: channels.y.label,
+			value: formatChannel(point.y, channels.y, decimalPrecision),
+		},
+	];
+	if (channels.size && point.size != null) {
+		const sizeRow = {
+			label: channels.size.label,
+			value: formatChannel(point.size, channels.size, decimalPrecision),
+		};
+		// Size bound to the X or Y column would only repeat that row.
+		if (
+			!rows.some(
+				(row) => row.label === sizeRow.label && row.value === sizeRow.value,
+			)
+		) {
+			rows.push(sizeRow);
+		}
+	}
+	return rows;
+}

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

@@ -6,6 +6,10 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
+import type {
+	ScatterChannels,
+	ScatterPointLabel,
+} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -119,6 +123,16 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
+export interface ScatterTooltipProps
+	extends BaseTooltipProps, TooltipRenderArgs {
+	channels: ScatterChannels;
+	/** The group values behind a point, e.g. `service.name` → `cart`. */
+	resolvePointGroupValues?: (
+		seriesIndex: number,
+		dataIndex: number,
+	) => ScatterPointLabel[];
+}
+
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

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

@@ -39,6 +39,16 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
+	/** Styled like the grid. */
+	private buildBorderConfig(
+		grid: uPlot.Axis.Grid | undefined,
+	): uPlot.Axis.Border | undefined {
+		if (this.props.showBorder === false || !grid || grid.show === false) {
+			return undefined;
+		}
+		return { show: true, stroke: grid.stroke, width: grid.width };
+	}
+
 	/**
 	 * Build ticks configuration
 	 */
@@ -59,31 +69,47 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 	/**
 	 * Build values formatter for X-axis (time)
+	 * A non-time x axis with a unit or precision formats like a value axis.
 	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis } = this.props;
+		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
+		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
+			return this.buildValueAxisFormatter();
+		}
+
 		return undefined;
 	}
 
 	/**
 	 * Build values formatter for Y-axis (values with units)
+	 * Blanks splits outside the scale; uPlot's asinh splits always include ±threshold.
 	 */
-	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision } = this.props;
+	private buildValueAxisFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
 
-		return (_, t): string[] =>
-			t.map((v) => {
-				if (v === null || v === undefined || Number.isNaN(v)) {
+		return (u, t): string[] => {
+			const scale = u?.scales?.[scaleKey];
+			const min = scale?.min ?? -Infinity;
+			const max = scale?.max ?? Infinity;
+			return t.map((v) => {
+				if (
+					v === null ||
+					v === undefined ||
+					Number.isNaN(v) ||
+					v < min ||
+					v > max
+				) {
 					return '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
+		};
 	}
 
 	/**
@@ -101,7 +127,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 
@@ -149,10 +175,12 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			side = 2, // bottom by default
 			space,
 			splits,
+			filter,
 			gap = 5, // default gap is 5
 		} = this.props;
 
 		const grid = this.buildGridConfig();
+		const border = this.buildBorderConfig(grid);
 		const ticks = this.buildTicksConfig();
 		const values = this.buildValuesFormatter();
 		const size = this.buildSizeCalculator();
@@ -177,6 +205,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (ticks) {
 			axisConfig.ticks = ticks;
 		}
+		if (border) {
+			axisConfig.border = border;
+		}
 		if (values) {
 			axisConfig.values = values;
 		}
@@ -189,6 +220,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (space !== undefined) {
 			axisConfig.space = space;
 		}
+		if (filter) {
+			axisConfig.filter = filter;
+		}
 		if (size) {
 			axisConfig.size = size;
 		}

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

@@ -20,6 +20,7 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
+	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -66,6 +67,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
+	private mode: PlotMode = PlotMode.Aligned;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -163,6 +166,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
+	setMode(mode: PlotMode): void {
+		this.mode = mode;
+	}
+
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -519,6 +526,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			{} as Record<string, uPlot.Scale>,
 		);
 
+		if (this.mode === PlotMode.Faceted) {
+			config.mode = this.mode as number as uPlot.Mode;
+		}
+
 		config.hooks = this.hooks;
 		config.select = this.select;
 

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

@@ -40,6 +40,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			range,
 			thresholds,
 			logBase = 10,
+			asinhThreshold,
 			padMinBy = 0,
 			padMaxBy = 0.05,
 		} = this.props;
@@ -99,6 +100,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
+			asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

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

@@ -88,6 +88,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
+		} else if (this.props.drawStyle === DrawStyle.Scatter) {
+			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -123,7 +125,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points) {
+		if (isMarkerOnlyDrawStyle(drawStyle)) {
 			return { paths: (): null => null };
 		}
 
@@ -195,6 +197,10 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
+		// The discs are the series path; uPlot's own points would double-draw them.
+		if (drawStyle === DrawStyle.Scatter) {
+			return false;
+		}
 		return !!showPoints;
 	}
 
@@ -226,6 +232,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			show = true,
 			metric,
 			partialTimestamps,
+			facets,
 		} = this.props;
 
 		const resolvedLineColor = this.getLineColor();
@@ -255,6 +262,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
 			...(partialTimestamps?.size ? { partialTimestamps } : {}),
+			...(facets && { facets }),
 		};
 	}
 }
@@ -270,6 +278,11 @@ interface PathBuilders {
 /**
  * Get path builder based on draw style and interpolation
  */
+/** Draws standalone markers, never a connecting line. */
+function isMarkerOnlyDrawStyle(drawStyle: DrawStyle): boolean {
+	return drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter;
+}
+
 function getPathBuilder({
 	drawStyle,
 	lineInterpolation,

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

@@ -120,6 +120,41 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
+	it('draws the axis line by default, styled like the grid', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
+		).getConfig();
+
+		expect(config.border).toStrictEqual({
+			show: true,
+			stroke: config.grid?.stroke,
+			width: 0.5,
+		});
+	});
+
+	it('leaves the axis line off when showBorder is false', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('leaves the axis line off when the grid is hidden', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ grid: { show: false } })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('passes explicit splits and a label filter through to uPlot', () => {
+		const splits = jest.fn();
+		const filter = jest.fn();
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ splits, filter }),
+		).getConfig();
+
+		expect(config.splits).toBe(splits);
+		expect(config.filter).toBe(filter);
+	});
+
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -376,3 +411,51 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
+
+describe('UPlotAxisBuilder value x axis', () => {
+	it('formats a non-time x axis with its unit', () => {
+		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
+		).getConfig();
+
+		const values = (config.values as uPlot.Axis.DynamicValues)(
+			{} as uPlot,
+			[1200],
+			0,
+			0,
+			0,
+		);
+
+		expect(values).toStrictEqual(['1.2K req/s']);
+		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
+	});
+
+	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
+		).getConfig();
+
+		expect(config.values).toBeUndefined();
+	});
+});
+
+describe('UPlotAxisBuilder out-of-range splits', () => {
+	it('leaves a split the scale cannot place unlabelled', () => {
+		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
+		).getConfig();
+		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
+
+		const values = (config.values as uPlot.Axis.DynamicValues)(
+			u,
+			[-10, 0, 500, 5000],
+			0,
+			0,
+			0,
+		);
+
+		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
+	});
+});

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

@@ -5,7 +5,12 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
+import {
+	DrawStyle,
+	PlotMode,
+	SelectionPreferencesSource,
+	StackMode,
+} from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -667,3 +672,14 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().hooks?.draw).toHaveLength(1);
 	});
 });
+
+describe('UPlotConfigBuilder plot mode', () => {
+	it('leaves mode unset for aligned data and emits 2 when faceted', () => {
+		const aligned = new UPlotConfigBuilder({ id: 'aligned' });
+		expect(aligned.getConfig().mode).toBeUndefined();
+
+		const faceted = new UPlotConfigBuilder({ id: 'faceted' });
+		faceted.setMode(PlotMode.Faceted);
+		expect(faceted.getConfig().mode).toBe(2);
+	});
+});

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

@@ -425,3 +425,39 @@ describe('UPlotSeriesBuilder', () => {
 		);
 	});
 });
+
+describe('UPlotSeriesBuilder scatter', () => {
+	it('draws through the given path builder and hides uPlot points', () => {
+		const pathBuilder = jest.fn();
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Scatter,
+				pathBuilder,
+				facets: [{ scale: 'x' }, { scale: 'y' }],
+				lineColor: '#ff0000',
+				fillOpacity: 0.5,
+				lineWidth: 1,
+				pointSize: 8,
+			}),
+		).getConfig();
+
+		expect(config.paths).toBe(pathBuilder);
+		expect(config.facets).toStrictEqual([{ scale: 'x' }, { scale: 'y' }]);
+		expect(config.points?.show).toBe(false);
+		expect(config.points?.size).toBe(8);
+		expect(config.stroke).toBe('#ff0000');
+		expect(config.width).toBe(1);
+		expect(config.fill).toBe('#ff000080');
+	});
+
+	it('draws nothing without a path builder', () => {
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({ drawStyle: DrawStyle.Scatter }),
+		).getConfig();
+
+		expect(
+			(config.paths as uPlot.Series.PathBuilder)({} as uPlot, 1, 0, 0),
+		).toBeNull();
+		expect(config.facets).toBeUndefined();
+	});
+});

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

@@ -80,6 +80,10 @@ export interface AxisProps {
 	values?: uPlot.Axis.Values;
 	/** Explicit axis splits, overriding the default tick calculation. */
 	splits?: uPlot.Axis.Splits;
+	/** Which splits get a label, replacing uPlot's per-distribution default. */
+	filter?: uPlot.Axis.Filter;
+	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
+	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -90,7 +94,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
+	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`); a non-time x axis reads it too. */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -109,6 +113,13 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
+	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
+	SymmetricLog = 'symlog',
+}
+
+export enum PlotMode {
+	Aligned = 1,
+	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -125,6 +136,8 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
+	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
+	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -146,6 +159,7 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
+	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -232,6 +246,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	metric?: { [key: string]: string };
 	/** Epoch-second x values whose bucket doesn't cover a full step; marked with a dotted ring. */
 	partialTimestamps?: Set<number>;
+	/** Mode 2 only: the scales the series' own x and y columns are read against. */
+	facets?: Series.Facet[];
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/hooks/__tests__/useThresholdsDrawHook.test.ts

@@ -0,0 +1,56 @@
+import type uPlot from 'uplot';
+
+import { thresholdsDrawHook } from '../useThresholdsDrawHook';
+
+function mockPlot(ori: 0 | 1): { plot: uPlot; ctx: Record<string, jest.Mock> } {
+	const ctx = {
+		save: jest.fn(),
+		restore: jest.fn(),
+		setLineDash: jest.fn(),
+		beginPath: jest.fn(),
+		moveTo: jest.fn(),
+		lineTo: jest.fn(),
+		stroke: jest.fn(),
+		fillText: jest.fn(),
+		measureText: jest.fn(() => ({ width: 40 })),
+	};
+	const plot = {
+		ctx: { ...ctx, canvas: { height: 300 } },
+		bbox: { left: 10, top: 20, width: 400, height: 200 },
+		scales: { s: { ori } },
+		valToPos: (): number => 100,
+	} as unknown as uPlot;
+	return { plot, ctx };
+}
+
+const draw = (plot: uPlot): void =>
+	(
+		thresholdsDrawHook({
+			scaleKey: 's',
+			thresholds: [{ thresholdValue: 5, thresholdLabel: 'SLO' }],
+		}) as (u: uPlot) => void
+	)(plot);
+
+describe('thresholdsDrawHook', () => {
+	it('draws a horizontal line across a vertical scale', () => {
+		const { plot, ctx } = mockPlot(1);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(10, 100);
+		expect(ctx.lineTo).toHaveBeenCalledWith(410, 100);
+		expect(ctx.fillText).toHaveBeenCalledWith('SLO', 350, 85);
+	});
+
+	it('draws a vertical line across a horizontal scale', () => {
+		const { plot, ctx } = mockPlot(0);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(100, 20);
+		expect(ctx.lineTo).toHaveBeenCalledWith(100, 220);
+		expect(ctx.fillText).toHaveBeenCalledWith(
+			'SLO',
+			expect.any(Number),
+			expect.any(Number),
+		);
+	});
+});

frontend/src/lib/uPlotV2/hooks/useThresholdsDrawHook.ts

@@ -29,13 +29,42 @@ export function thresholdsDrawHook(
 
 			const scaleVal = u.valToPos(Number(yValue), scaleKey, true);
 
+			ctx.strokeStyle = color;
+
+			// A horizontal scale (e.g. a scatter plot's x) takes a vertical line.
+			if (u.scales[scaleKey]?.ori === 0) {
+				const x = Math.round(scaleVal);
+				const top = Math.round(u.bbox.top);
+
+				ctx.beginPath();
+				ctx.moveTo(x, top);
+				ctx.lineTo(x, Math.round(u.bbox.top + u.bbox.height));
+				ctx.stroke();
+
+				if (threshold.thresholdLabel) {
+					const gap = 6 * uPlot.pxRatio;
+					const textWidth = ctx.measureText(threshold.thresholdLabel).width;
+					const fitsRight = x + gap + textWidth <= u.bbox.left + u.bbox.width;
+					// uPlot leaves the last axis's text alignment on the context.
+					ctx.save();
+					ctx.fillStyle = color;
+					ctx.textAlign = 'left';
+					ctx.textBaseline = 'top';
+					ctx.fillText(
+						threshold.thresholdLabel,
+						fitsRight ? x + gap : x - gap - textWidth,
+						top + gap,
+					);
+					ctx.restore();
+				}
+				continue;
+			}
+
 			const x0 = Math.round(u.bbox.left);
 			const y0 = Math.round(scaleVal);
 			const x1 = Math.round(u.bbox.left + u.bbox.width);
 			const y1 = Math.round(scaleVal);
 
-			ctx.strokeStyle = color;
-
 			ctx.beginPath();
 			ctx.moveTo(x0, y0);
 			ctx.lineTo(x1, y1);

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/geometry.test.ts

@@ -0,0 +1,116 @@
+import type uPlot from 'uplot';
+
+import { Quadtree } from '../../../utils/quadtree';
+import {
+	resolveHit,
+	resolvePointDiameter,
+	resolveSizeDomain,
+} from '../geometry';
+import { ScatterHit, ScatterPointSize } from '../types';
+
+const POINT_SIZE: ScatterPointSize = { fixed: 6, min: 4, max: 20 };
+
+const asData = (columns: unknown[]): uPlot.AlignedData =>
+	columns as unknown as uPlot.AlignedData;
+
+describe('resolveSizeDomain', () => {
+	it('spans the size columns of every series, skipping nulls', () => {
+		const data = asData([
+			null,
+			[
+				[1, 2],
+				[1, 2],
+				[10, null],
+			],
+			[[3], [3], [40]],
+		]);
+
+		expect(resolveSizeDomain(data)).toStrictEqual({ min: 10, max: 40 });
+	});
+
+	it('is null when no series carries sizes', () => {
+		expect(resolveSizeDomain(asData([null, [[1], [1]]]))).toBeNull();
+		expect(resolveSizeDomain(asData([null, [[1], [1], [null]]]))).toBeNull();
+	});
+});
+
+describe('resolvePointDiameter', () => {
+	it('uses the fixed diameter without a size or a domain', () => {
+		expect(resolvePointDiameter(null, { min: 0, max: 10 }, POINT_SIZE)).toBe(6);
+		expect(resolvePointDiameter(5, null, POINT_SIZE)).toBe(6);
+	});
+
+	it('maps the domain ends to min and max', () => {
+		const domain = { min: 0, max: 100 };
+		expect(resolvePointDiameter(0, domain, POINT_SIZE)).toBe(4);
+		expect(resolvePointDiameter(100, domain, POINT_SIZE)).toBe(20);
+	});
+
+	it('scales by area, not diameter', () => {
+		const midArea = (4 ** 2 + 20 ** 2) / 2;
+		expect(
+			resolvePointDiameter(50, { min: 0, max: 100 }, POINT_SIZE),
+		).toBeCloseTo(Math.sqrt(midArea));
+	});
+
+	it('clamps values outside the domain', () => {
+		const domain = { min: 10, max: 20 };
+		expect(resolvePointDiameter(-5, domain, POINT_SIZE)).toBe(4);
+		expect(resolvePointDiameter(500, domain, POINT_SIZE)).toBe(20);
+	});
+
+	it('uses the midpoint when every size is the same', () => {
+		expect(resolvePointDiameter(7, { min: 7, max: 7 }, POINT_SIZE)).toBe(12);
+	});
+});
+
+describe('resolveHit', () => {
+	const hit = (
+		seriesIndex: number,
+		dataIndex: number,
+		x: number,
+		y: number,
+		d: number,
+	): ScatterHit => ({ seriesIndex, dataIndex, x, y, w: d, h: d });
+
+	it('returns the disc under the cursor', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+		tree.add(hit(2, 3, 50, 50, 6));
+
+		expect(resolveHit(tree, 13, 13, 0)).toMatchObject({
+			seriesIndex: 1,
+			dataIndex: 0,
+		});
+		expect(resolveHit(tree, 52, 52, 0)).toMatchObject({
+			seriesIndex: 2,
+			dataIndex: 3,
+		});
+	});
+
+	it('is null when the cursor is off every disc', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+
+		expect(resolveHit(tree, 30, 30, 0)).toBeNull();
+		// Inside the disc's bounding square, outside the disc.
+		expect(resolveHit(tree, 15.8, 15.8, 0)).toBeNull();
+	});
+
+	it('tolerance widens each disc', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+
+		expect(resolveHit(tree, 18, 13, 0)).toBeNull();
+		expect(resolveHit(tree, 18, 13, 3)).not.toBeNull();
+	});
+
+	it('prefers the disc whose centre is nearest when they overlap', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 10));
+		tree.add(hit(1, 1, 14, 10, 10));
+
+		expect(resolveHit(tree, 13, 15, 0)?.dataIndex).toBe(0);
+		expect(resolveHit(tree, 21, 15, 0)?.dataIndex).toBe(1);
+	});
+});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/scatterPlugin.test.ts

@@ -0,0 +1,290 @@
+import uPlot from 'uplot';
+
+import { UPlotConfigBuilder } from '../../../config/UPlotConfigBuilder';
+import {
+	applyScatterPlugin,
+	createScatterPlugin,
+	SCATTER_FACETS,
+} from '../scatterPlugin';
+
+jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
+	getStoredSeriesVisibility: jest.fn(),
+}));
+
+/** jsdom has no Path2D; the builder only needs something that takes the calls. */
+class FakePath2D {
+	moveTo = jest.fn();
+	arc = jest.fn();
+}
+
+type OrientCallback = Parameters<typeof uPlot.orient>[2];
+
+interface FakePlotArgs {
+	series: Array<{ xs: number[]; ys: number[]; sizes?: Array<number | null> }>;
+	cursor?: { left: number; top: number };
+	scaleX?: { min: number; max: number };
+	scaleY?: { min: number; max: number };
+}
+
+/**
+ * A 100×100 plot at the canvas origin with identity scales: value 10 draws at
+ * pixel 10 on x, and at 100 − 10 on y (uPlot's y grows downward).
+ */
+function createFakePlot({
+	series,
+	cursor = { left: -1, top: -1 },
+	scaleX = { min: 0, max: 100 },
+	scaleY = { min: 0, max: 100 },
+}: FakePlotArgs): uPlot {
+	const data = [
+		null,
+		...series.map((entry) =>
+			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
+		),
+	];
+	return {
+		data,
+		series: [{}, ...series.map((_, index) => ({ label: `s${index + 1}` }))],
+		bbox: { left: 0, top: 0, width: 100, height: 100 },
+		cursor,
+		scales: { x: scaleX, y: scaleY },
+	} as unknown as uPlot;
+}
+
+/** Stands in for `uPlot.orient`: identity x, flipped y, an `arc` that records. */
+function orientWithIdentityScales(
+	u: uPlot,
+	seriesIdx: number,
+	cb: OrientCallback,
+): void {
+	const columns = (u.data as unknown as Array<number[][] | null>)[seriesIdx];
+	if (!columns) {
+		return;
+	}
+	const scaleX = (u.scales as unknown as Record<string, uPlot.Scale>).x;
+	const scaleY = (u.scales as unknown as Record<string, uPlot.Scale>).y;
+	const valToPosX = (value: number): number => value;
+	const valToPosY = (value: number): number => 100 - value;
+	// Real uPlot's `arc` helper forwards to the path; the test counts those calls.
+	const arc = (path: FakePath2D, ...args: number[]): void => {
+		path.arc(...args);
+	};
+	cb(
+		u.series[seriesIdx],
+		columns[0],
+		columns[1],
+		scaleX,
+		scaleY,
+		valToPosX as unknown as uPlot.ValToPos,
+		valToPosY as unknown as uPlot.ValToPos,
+		0,
+		0,
+		100,
+		100,
+		jest.fn() as never,
+		jest.fn() as never,
+		jest.fn() as never,
+		arc as never,
+		jest.fn() as never,
+	);
+}
+
+describe('createScatterPlugin', () => {
+	beforeAll(() => {
+		(globalThis as { Path2D?: unknown }).Path2D = FakePath2D;
+	});
+
+	let orient: jest.SpyInstance;
+
+	beforeEach(() => {
+		orient = jest
+			.spyOn(uPlot, 'orient')
+			.mockImplementation(orientWithIdentityScales);
+	});
+
+	afterEach(() => {
+		orient.mockReset();
+	});
+
+	function drawAll(
+		u: uPlot,
+		plugin: ReturnType<typeof createScatterPlugin>,
+	): void {
+		plugin.hooks.drawClear(u);
+		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
+			const columns = (u.data as unknown as number[][][])[seriesIdx];
+			plugin.pathBuilder(u, seriesIdx, 0, columns[0].length - 1);
+		}
+	}
+
+	/** Runs the cursor scan the way uPlot does: every data series, in order. */
+	function scan(
+		u: uPlot,
+		plugin: ReturnType<typeof createScatterPlugin>,
+	): Array<number | null> {
+		const dataIdx = plugin.cursor.dataIdx as NonNullable<uPlot.Cursor['dataIdx']>;
+		const indexes: Array<number | null> = [null];
+		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
+			indexes.push(dataIdx(u, seriesIdx, 0, 0));
+		}
+		return indexes;
+	}
+
+	it('returns one path that strokes and fills the same discs', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({ series: [{ xs: [10, 20], ys: [10, 20] }] });
+		plugin.hooks.drawClear(u);
+
+		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
+
+		expect(paths.stroke).toBeInstanceOf(FakePath2D);
+		expect(paths.fill).toBe(paths.stroke);
+		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(2);
+	});
+
+	it('resolves the hovered point to its own series and index', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 6, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [
+				{ xs: [10, 50], ys: [10, 50] },
+				{ xs: [80], ys: [80] },
+			],
+			// Over the second series' only point: x 80, y drawn at 100 − 80.
+			cursor: { left: 80, top: 20 },
+		});
+		drawAll(u, plugin);
+
+		expect(scan(u, plugin)).toStrictEqual([null, null, 0]);
+		expect(plugin.getHit()).toMatchObject({ seriesIndex: 2, dataIndex: 0 });
+	});
+
+	it('returns null for every series when the cursor is off the plot or off any disc', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: -1, top: -1 },
+		});
+		drawAll(u, plugin);
+
+		expect(scan(u, plugin)).toStrictEqual([null, null]);
+
+		(u.cursor as { left: number; top: number }).left = 50;
+		(u.cursor as { left: number; top: number }).top = 50;
+		expect(scan(u, plugin)).toStrictEqual([null, null]);
+	});
+
+	it('skips points outside the visible scale range', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({
+			series: [{ xs: [10, 500], ys: [10, 10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+
+		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
+		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(1);
+		expect(scan(u, plugin)).toStrictEqual([null, 0]);
+	});
+
+	it('rings the hit disc, in CSS pixels, with a gap around it', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 8, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		const bbox = plugin.cursor.points?.bbox;
+		// The 8px disc spans 6..14; the ring sits 3px out and is 2px wide.
+		expect(bbox?.(u, 1)).toStrictEqual({
+			left: 1,
+			top: 81,
+			width: 18,
+			height: 18,
+		});
+		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
+	});
+
+	it('snaps the ring to whole pixels without moving its centre', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 7, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		// The 7px disc starts at 6.5, so the ring's edge would land on 1.5.
+		const ring = plugin.cursor.points?.bbox?.(u, 1);
+		expect(ring).toMatchObject({ left: 1, width: 18 });
+		expect((ring?.left ?? 0) + (ring?.width ?? 0) / 2).toBe(10);
+	});
+
+	it('draws the hover marker as an outline in the series colour', () => {
+		const plugin = createScatterPlugin();
+		const u = {
+			series: [{}, { stroke: (): string => '#E5484D' }, { stroke: '#30A46C' }],
+		} as unknown as uPlot;
+		const points = plugin.cursor.points as {
+			fill: (u: uPlot, seriesIdx: number) => string;
+			stroke: (u: uPlot, seriesIdx: number) => string;
+			width: (u: uPlot, seriesIdx: number, size: number) => number;
+		};
+
+		expect(points.fill(u, 1)).toBe('transparent');
+		expect(points.stroke(u, 1)).toBe('#E5484D');
+		expect(points.stroke(u, 2)).toBe('#30A46C');
+		expect(points.width(u, 1, 0)).toBe(2);
+	});
+
+	it('drawClear drops cached paths on data series only', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({ series: [{ xs: [1], ys: [1] }] });
+		const [xSeries, dataSeries] = u.series as Array<{ _paths?: unknown }>;
+		xSeries._paths = 'x';
+		dataSeries._paths = 'cached';
+
+		plugin.hooks.drawClear(u);
+
+		expect(xSeries._paths).toBe('x');
+		expect(dataSeries._paths).toBeNull();
+	});
+
+	it('focus distance is zero, so the hit series wins focus', () => {
+		const plugin = createScatterPlugin();
+		expect(plugin.cursor.focus?.dist?.({} as uPlot, 1, 0, 0, 0)).toBe(0);
+	});
+});
+
+describe('applyScatterPlugin', () => {
+	it('switches the builder to faceted mode and disables drag selection', () => {
+		const builder = new UPlotConfigBuilder({ id: 'scatter' });
+		const plugin = createScatterPlugin();
+
+		applyScatterPlugin(builder, plugin);
+		const config = builder.getConfig();
+
+		expect(config.mode).toBe(2);
+		expect(config.cursor?.drag).toMatchObject({
+			x: false,
+			y: false,
+			setScale: false,
+		});
+		expect(config.hooks?.drawClear).toHaveLength(1);
+		expect(config.hooks?.destroy).toHaveLength(1);
+	});
+
+	it('facets read x and y against the shared scales', () => {
+		expect(SCATTER_FACETS).toStrictEqual([
+			{ scale: 'x', auto: true },
+			{ scale: 'y', auto: true },
+		]);
+	});
+});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/geometry.ts

@@ -0,0 +1,89 @@
+import type uPlot from 'uplot';
+
+import type { Quadtree } from '../../utils/quadtree';
+import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
+
+export interface SizeDomain {
+	min: number;
+	max: number;
+}
+
+/** Size extent across all series, so equal values draw equal discs. */
+export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
+	let min = Infinity;
+	let max = -Infinity;
+	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
+		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
+		if (!sizes) {
+			continue;
+		}
+		for (const size of sizes) {
+			if (size == null || !Number.isFinite(size)) {
+				continue;
+			}
+			min = Math.min(min, size);
+			max = Math.max(max, size);
+		}
+	}
+	return min <= max ? { min, max } : null;
+}
+
+/**
+ * Diameter for a size-channel value. Grows the disc's area, not its width,
+ * linearly with the value, so a value twice as large reads as twice the ink.
+ */
+export function resolvePointDiameter(
+	size: number | null | undefined,
+	domain: SizeDomain | null,
+	pointSize: ScatterPointSize,
+): number {
+	if (size == null || domain == null || !Number.isFinite(size)) {
+		return pointSize.fixed;
+	}
+	if (domain.max === domain.min) {
+		return (pointSize.min + pointSize.max) / 2;
+	}
+	const t = Math.min(
+		1,
+		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
+	);
+	const minArea = pointSize.min ** 2;
+	const maxArea = pointSize.max ** 2;
+	return Math.sqrt(minArea + (maxArea - minArea) * t);
+}
+
+/**
+ * The disc under the cursor, counting `tolerance` px beyond its edge as a hit.
+ * Where discs overlap, the one whose centre is closest wins; `null` if none.
+ */
+export function resolveHit(
+	tree: Quadtree<ScatterHit>,
+	cx: number,
+	cy: number,
+	tolerance: number,
+): ScatterHit | null {
+	let best: ScatterHit | null = null;
+	let bestDistance = Infinity;
+
+	tree.get(
+		cx - tolerance,
+		cy - tolerance,
+		tolerance * 2,
+		tolerance * 2,
+		(hit) => {
+			const dx = cx - (hit.x + hit.w / 2);
+			const dy = cy - (hit.y + hit.h / 2);
+			const distance = dx * dx + dy * dy;
+			const reach = hit.w / 2 + tolerance;
+			if (distance > reach * reach) {
+				return;
+			}
+			if (distance < bestDistance) {
+				best = hit;
+				bestDistance = distance;
+			}
+		},
+	);
+
+	return best;
+}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin.ts

@@ -0,0 +1,225 @@
+import uPlot, { Series } from 'uplot';
+
+import { DEFAULT_FOCUS_PROXIMITY_VALUE } from '../../constants';
+import { PlotMode } from '../../config/types';
+import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
+import { Quadtree } from '../../utils/quadtree';
+import {
+	resolveHit,
+	resolvePointDiameter,
+	resolveSizeDomain,
+	SizeDomain,
+} from './geometry';
+import {
+	DEFAULT_HOVER_TOLERANCE_PX,
+	DEFAULT_SCATTER_POINT_SIZE,
+	ScatterHit,
+	ScatterPluginOptions,
+	ScatterSeriesData,
+} from './types';
+
+export const SCATTER_FACETS: Series.Facet[] = [
+	{ scale: 'x', auto: true },
+	{ scale: 'y', auto: true },
+];
+
+const HIDDEN_BBOX: uPlot.BBox = { left: -10, top: -10, width: 0, height: 0 };
+
+const TWO_PI = 2 * Math.PI;
+
+/** CSS pixels between a hovered disc and the outline ring drawn around it. */
+const HOVER_RING_GAP_PX = 3;
+const HOVER_RING_WIDTH_PX = 2;
+
+/** uPlot ceils a cursor point's left/top but not its size; snap so the ring stays centred. */
+function snapToPixel(start: number, length: number): [number, number] {
+	const snapped = Math.floor(start);
+	return [snapped, length + (start - snapped) * 2];
+}
+
+export function getSeriesStroke(u: uPlot, seriesIdx: number): string {
+	const { stroke } = u.series[seriesIdx];
+	const color = typeof stroke === 'function' ? stroke(u, seriesIdx) : stroke;
+	return typeof color === 'string' ? color : '';
+}
+
+/** uPlot caches built paths on the series; the field is internal to it. */
+type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
+
+export interface ScatterPlugin {
+	pathBuilder: Series.PathBuilder;
+	/** Hover by disc rather than by nearest x: mode 2 has no shared x to scan. */
+	cursor: uPlot.Cursor;
+	hooks: {
+		drawClear: (u: uPlot) => void;
+		destroy: (u: uPlot) => void;
+	};
+	getHit: () => ScatterHit | null;
+}
+
+export function createScatterPlugin({
+	pointSize = DEFAULT_SCATTER_POINT_SIZE,
+	hoverTolerance = DEFAULT_HOVER_TOLERANCE_PX,
+}: ScatterPluginOptions = {}): ScatterPlugin {
+	let tree: Quadtree<ScatterHit> | null = null;
+	let hit: ScatterHit | null = null;
+
+	// Spans every series; cached per dataset.
+	let cachedData: uPlot.AlignedData | null = null;
+	let cachedDomain: SizeDomain | null = null;
+
+	function getSizeDomain(u: uPlot): SizeDomain | null {
+		if (cachedData !== u.data) {
+			cachedDomain = resolveSizeDomain(u.data);
+			cachedData = u.data;
+		}
+		return cachedDomain;
+	}
+
+	const pathBuilder: Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
+		const path = new Path2D();
+		const sizes = (u.data[seriesIdx] as unknown as ScatterSeriesData)[2];
+		const domain = getSizeDomain(u);
+		const { pxRatio } = uPlot;
+
+		uPlot.orient(
+			u,
+			seriesIdx,
+			(
+				_series,
+				dataX,
+				dataY,
+				scaleX,
+				scaleY,
+				valToPosX,
+				valToPosY,
+				xOff,
+				yOff,
+				xDim,
+				yDim,
+				_moveTo,
+				_lineTo,
+				_rect,
+				arc,
+			) => {
+				const xMin = scaleX.min ?? -Infinity;
+				const xMax = scaleX.max ?? Infinity;
+				const yMin = scaleY.min ?? -Infinity;
+				const yMax = scaleY.max ?? Infinity;
+
+				for (let i = idx0; i <= idx1; i++) {
+					const x = dataX[i];
+					const y = dataY[i];
+					if (
+						x == null ||
+						y == null ||
+						x < xMin ||
+						x > xMax ||
+						y < yMin ||
+						y > yMax
+					) {
+						continue;
+					}
+
+					const diameter =
+						resolvePointDiameter(sizes?.[i], domain, pointSize) * pxRatio;
+					const radius = diameter / 2;
+					const cx = valToPosX(x, scaleX, xDim, xOff);
+					const cy = valToPosY(y, scaleY, yDim, yOff);
+
+					path.moveTo(cx + radius, cy);
+					arc(path, cx, cy, radius, 0, TWO_PI);
+
+					tree?.add({
+						x: cx - radius - u.bbox.left,
+						y: cy - radius - u.bbox.top,
+						w: diameter,
+						h: diameter,
+						seriesIndex: seriesIdx,
+						dataIndex: i,
+					});
+				}
+			},
+		);
+
+		return { stroke: path, fill: path, clip: null };
+	};
+
+	const cursor: uPlot.Cursor = {
+		// Selection would set the dashboard time range; neither axis is time here.
+		drag: { x: false, y: false, setScale: false },
+		dataIdx: (u, seriesIdx): number | null => {
+			// uPlot asks series 1..n in order on every cursor move; resolve once.
+			if (seriesIdx === 1) {
+				const { left = -1, top = -1 } = u.cursor;
+				const { pxRatio } = uPlot;
+				hit =
+					tree && left >= 0 && top >= 0
+						? resolveHit(
+								tree,
+								left * pxRatio,
+								top * pxRatio,
+								hoverTolerance * pxRatio,
+							)
+						: null;
+			}
+			return hit?.seriesIndex === seriesIdx ? hit.dataIndex : null;
+		},
+		points: {
+			bbox: (_u, seriesIdx): uPlot.BBox => {
+				if (hit?.seriesIndex !== seriesIdx) {
+					return HIDDEN_BBOX;
+				}
+				const { pxRatio } = uPlot;
+				const inset = HOVER_RING_GAP_PX + HOVER_RING_WIDTH_PX;
+				const [left, width] = snapToPixel(
+					hit.x / pxRatio - inset,
+					hit.w / pxRatio + inset * 2,
+				);
+				const [top, height] = snapToPixel(
+					hit.y / pxRatio - inset,
+					hit.h / pxRatio + inset * 2,
+				);
+				return { left, top, width, height };
+			},
+			fill: (): string => 'transparent',
+			stroke: getSeriesStroke,
+			width: (): number => HOVER_RING_WIDTH_PX,
+		},
+		// uPlot only measures series that returned a data index, i.e. the hit one.
+		focus: { prox: DEFAULT_FOCUS_PROXIMITY_VALUE, dist: (): number => 0 },
+	};
+
+	return {
+		pathBuilder,
+		cursor,
+		hooks: {
+			drawClear: (u: uPlot): void => {
+				tree = new Quadtree<ScatterHit>(0, 0, u.bbox.width, u.bbox.height);
+				// The tree holds only what the path builder drew, so force a rebuild.
+				u.series.forEach((series, index) => {
+					if (index > 0) {
+						(series as SeriesWithPaths)._paths = null;
+					}
+				});
+			},
+			destroy: (): void => {
+				tree = null;
+				hit = null;
+				cachedData = null;
+				cachedDomain = null;
+			},
+		},
+		getHit: (): ScatterHit | null => hit,
+	};
+}
+
+export function applyScatterPlugin(
+	builder: UPlotConfigBuilder,
+	plugin: ScatterPlugin,
+): void {
+	builder.setMode(PlotMode.Faceted);
+	builder.setCursor(plugin.cursor);
+	builder.addHook('drawClear', plugin.hooks.drawClear);
+	builder.addHook('destroy', plugin.hooks.destroy);
+}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/types.ts

@@ -0,0 +1,54 @@
+import type { QuadtreeRect } from '../../utils/quadtree';
+
+/** Diameters in CSS pixels. `min`/`max` bound the area scale when a size column is mapped. */
+export interface ScatterPointSize {
+	fixed: number;
+	min: number;
+	max: number;
+}
+
+export const DEFAULT_SCATTER_POINT_SIZE: ScatterPointSize = {
+	fixed: 6,
+	min: 4,
+	max: 24,
+};
+
+/** CSS pixels around a point's disc that still register as a hover. */
+export const DEFAULT_HOVER_TOLERANCE_PX = 3;
+
+export interface ScatterPluginOptions {
+	pointSize?: ScatterPointSize;
+	hoverTolerance?: number;
+}
+
+/** Parallel columns; a `null` size draws at `fixed`. */
+export type ScatterSeriesData = [
+	xs: number[],
+	ys: number[],
+	sizes?: Array<number | null>,
+];
+
+/** Mode-2 data: series 0 is uPlot's x placeholder and carries nothing. */
+export type ScatterChartData = [null, ...ScatterSeriesData[]];
+
+/** A drawn point's disc, in canvas pixels relative to the plot area. */
+export interface ScatterHit extends QuadtreeRect {
+	seriesIndex: number;
+	dataIndex: number;
+}
+
+export interface ScatterChannel {
+	label: string;
+	unit?: string;
+}
+
+export interface ScatterChannels {
+	x: ScatterChannel;
+	y: ScatterChannel;
+	size?: ScatterChannel;
+}
+
+export interface ScatterPointLabel {
+	key: string;
+	value: string;
+}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/buildClickData.test.ts

@@ -0,0 +1,52 @@
+import type uPlot from 'uplot';
+
+import { buildClickData } from '../utils';
+
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => ({ seriesIndex: 1 })),
+}));
+
+const event = {
+	offsetX: 10,
+	offsetY: 20,
+	clientX: 110,
+	clientY: 220,
+} as MouseEvent;
+
+describe('buildClickData', () => {
+	it('skips the x-index lookups on a faceted plot, which has no shared x series', () => {
+		const posToIdx = jest.fn(() => {
+			throw new Error('faceted data[0] is null');
+		});
+		const plot = {
+			data: [null],
+			posToVal: (pos: number): number => pos * 2,
+			posToIdx,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toStrictEqual({
+			xValue: 20,
+			yValue: 40,
+			focusedSeries: null,
+			clickedDataTimestamp: 20,
+			mouseX: 10,
+			mouseY: 20,
+			absoluteMouseX: 110,
+			absoluteMouseY: 220,
+		});
+		expect(posToIdx).not.toHaveBeenCalled();
+	});
+
+	it('resolves the focused series and clicked timestamp on an aligned plot', () => {
+		const plot = {
+			data: [[100, 200, 300]],
+			posToVal: (pos: number): number => pos,
+			posToIdx: (): number => 1,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toMatchObject({
+			focusedSeries: { seriesIndex: 1 },
+			clickedDataTimestamp: 200,
+		});
+	});
+});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -174,6 +174,24 @@ export function createLayoutObserver(
 export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
+	const pointer = {
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
+	};
+
+	// Faceted (scatter): no shared x, so `posToIdx` would throw.
+	if (plot.data[0] == null) {
+		return {
+			xValue,
+			yValue,
+			focusedSeries: null,
+			clickedDataTimestamp: xValue,
+			...pointer,
+		};
+	}
+
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
 
 	const dataIndex = plot.posToIdx(event.offsetX);
@@ -193,9 +211,6 @@ export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 		yValue,
 		focusedSeries,
 		clickedDataTimestamp,
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
+		...pointer,
 	};
 }

frontend/src/lib/uPlotV2/utils/__tests__/logGridSplits.test.ts

@@ -0,0 +1,66 @@
+import type uPlot from 'uplot';
+
+import { logScaleSplits, spacedLogLabels } from '../logGridSplits';
+
+describe('logScaleSplits', () => {
+	const splitsFor = (min: number, max: number): number[] =>
+		(
+			logScaleSplits as (
+				u: uPlot,
+				axisIdx: number,
+				min: number,
+				max: number,
+			) => number[]
+		)({} as uPlot, 0, min, max);
+
+	it('splits at 1, 2 and 5 × 10ⁿ inside an unsnapped range', () => {
+		expect(splitsFor(10.6, 990)).toStrictEqual([20, 50, 100, 200, 500]);
+	});
+
+	it('includes the ends when they fall on a split', () => {
+		expect(splitsFor(0.1, 10)).toStrictEqual([0.1, 0.2, 0.5, 1, 2, 5, 10]);
+	});
+
+	it('steps evenly through a range too narrow for two 1/2/5 splits', () => {
+		expect(splitsFor(7.6, 9.4)).toStrictEqual([8, 9]);
+		expect(splitsFor(8.12, 8.19)).toStrictEqual([
+			8.12, 8.13, 8.14, 8.15, 8.16, 8.17, 8.18, 8.19,
+		]);
+	});
+
+	it('is empty for a range a log scale cannot hold', () => {
+		expect(splitsFor(0, 10)).toStrictEqual([]);
+		expect(splitsFor(5, 5)).toStrictEqual([]);
+	});
+});
+
+describe('spacedLogLabels', () => {
+	// 100px per decade.
+	const plot = {
+		axes: [{ scale: 'x' }],
+		valToPos: (value: number): number => Math.log10(value) * 100,
+	} as unknown as uPlot;
+	const label = (splits: number[], space: number): (number | null)[] =>
+		spacedLogLabels(plot, splits, 0, space, 0) as (number | null)[];
+
+	it('always labels the powers of ten', () => {
+		expect(label([10, 20, 50, 100], 200)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('adds a 2 or 5 that clears the labels already kept', () => {
+		// 20 is 30px from 10; 50 is 70px from 10 and 30px from 100.
+		expect(label([10, 20, 50, 100], 25)).toStrictEqual([10, 20, 50, 100]);
+		expect(label([10, 20, 50, 100], 40)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('labels both ends of a range spanning under a decade', () => {
+		// 100 sits at 200px; 20 (130px) and 500 (270px) clear it, 50 and 200 do not.
+		expect(label([20, 50, 100, 200, 500], 60)).toStrictEqual([
+			20,
+			null,
+			100,
+			null,
+			500,
+		]);
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/quadtree.test.ts

@@ -0,0 +1,64 @@
+import { Quadtree, QuadtreeRect } from '../quadtree';
+
+interface Item extends QuadtreeRect {
+	id: number;
+}
+
+function collect(
+	tree: Quadtree<Item>,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): Set<number> {
+	const ids = new Set<number>();
+	tree.get(x, y, w, h, (item) => ids.add(item.id));
+	return ids;
+}
+
+describe('Quadtree', () => {
+	it('returns items in the queried region and not those far from it', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
+		tree.add({ id: 2, x: 80, y: 80, w: 5, h: 5 });
+
+		// Below the split threshold every item is visited; callers refine the hit.
+		expect(collect(tree, 9, 9, 8, 8)).toStrictEqual(new Set([1, 2]));
+	});
+
+	it('splits past the object limit and still finds every item', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		const total = 50;
+		for (let id = 0; id < total; id++) {
+			tree.add({ id, x: (id % 10) * 10, y: Math.floor(id / 10) * 10, w: 4, h: 4 });
+		}
+
+		expect(collect(tree, 0, 0, 100, 100).size).toBe(total);
+	});
+
+	it('after a split, a query in one quadrant skips items confined to another', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		for (let id = 0; id < 20; id++) {
+			// All in the north-west quadrant.
+			tree.add({ id, x: 1 + id, y: 1, w: 2, h: 2 });
+		}
+		tree.add({ id: 99, x: 90, y: 90, w: 2, h: 2 });
+
+		const northWest = collect(tree, 0, 0, 10, 10);
+		expect(northWest.has(99)).toBe(false);
+		expect(collect(tree, 85, 85, 10, 10).has(99)).toBe(true);
+	});
+
+	it('reports an item straddling the midline from either side', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		for (let id = 0; id < 20; id++) {
+			tree.add({ id, x: 1, y: 1 + id, w: 2, h: 2 });
+		}
+		tree.add({ id: 99, x: 48, y: 48, w: 4, h: 4 });
+
+		expect(collect(tree, 40, 40, 5, 5).has(99)).toBe(true);
+		expect(collect(tree, 55, 55, 5, 5).has(99)).toBe(true);
+		// A zero-size query exactly on both midlines.
+		expect(collect(tree, 50, 50, 0, 0).has(99)).toBe(true);
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -195,3 +195,22 @@ describe('scale utils', () => {
 		});
 	});
 });
+
+describe('symmetric log scale', () => {
+	it('maps to uPlot arcsinh with the given linear threshold', () => {
+		expect(
+			scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.SymmetricLog,
+				asinhThreshold: 0.01,
+			}),
+		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
+
+		expect(
+			scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.SymmetricLog,
+			}).asinh,
+		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
+	});
+});

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

@@ -0,0 +1,92 @@
+import type uPlot from 'uplot';
+
+const DECADE_TOLERANCE = 1e-9;
+
+function isDecade(value: number): boolean {
+	if (value === 0) {
+		return true;
+	}
+	const exponent = Math.log10(Math.abs(value));
+	return Math.abs(exponent - Math.round(exponent)) < DECADE_TOLERANCE;
+}
+
+const LOG_SPLIT_MULTIPLES = [1, 2, 5];
+
+/** Decades finer than the range's own span that the fallback steps through. */
+const FALLBACK_STEP_DECADES = 3;
+
+/** Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max]. */
+function roundSplit(value: number): number {
+	return Number(value.toPrecision(12));
+}
+
+/** Evenly stepped splits for a range too narrow to hold two 1/2/5 splits. */
+function narrowRangeSplits(min: number, max: number): number[] {
+	const coarsest = Math.floor(Math.log10(max - min));
+	for (
+		let exponent = coarsest;
+		exponent > coarsest - FALLBACK_STEP_DECADES;
+		exponent--
+	) {
+		const step = 10 ** exponent;
+		const first = Math.ceil(roundSplit(min / step));
+		const last = Math.floor(roundSplit(max / step));
+		if (last > first) {
+			return Array.from({ length: last - first + 1 }, (_, index) =>
+				roundSplit((first + index) * step),
+			);
+		}
+	}
+	return [];
+}
+
+/** 1, 2, 5 × 10ⁿ in range; uPlot's log splits step from an unsnapped min (10.79, 21.58…). */
+export const logScaleSplits: uPlot.Axis.Splits = (_u, _axisIdx, min, max) => {
+	if (!(min > 0) || !(max > min)) {
+		return [];
+	}
+	const splits: number[] = [];
+	for (
+		let exponent = Math.floor(Math.log10(min));
+		exponent <= Math.ceil(Math.log10(max));
+		exponent++
+	) {
+		LOG_SPLIT_MULTIPLES.forEach((multiple) => {
+			const split = roundSplit(multiple * 10 ** exponent);
+			if (split >= min && split <= max) {
+				splits.push(split);
+			}
+		});
+	}
+	if (splits.length >= 2) {
+		return splits;
+	}
+	const narrow = narrowRangeSplits(min, max);
+	return narrow.length > splits.length ? narrow : splits;
+};
+
+/** Labels every decade, plus any 2 or 5 at least `space` px clear. */
+export const spacedLogLabels: uPlot.Axis.Filter = (
+	u,
+	splits,
+	axisIdx,
+	space,
+) => {
+	const scaleKey = u.axes[axisIdx]?.scale ?? 'x';
+	const positions = splits.map((split) =>
+		split == null ? null : u.valToPos(split, scaleKey),
+	);
+	const kept = splits.map((split) => split != null && isDecade(split));
+	const isClear = (index: number): boolean =>
+		kept.every(
+			(isKept, other) =>
+				!isKept ||
+				Math.abs((positions[other] ?? 0) - (positions[index] ?? 0)) >= space,
+		);
+	splits.forEach((split, index) => {
+		if (split != null && !kept[index] && isClear(index)) {
+			kept[index] = true;
+		}
+	});
+	return splits.map((split, index) => (kept[index] ? split : null));
+};

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

@@ -0,0 +1,101 @@
+export interface QuadtreeRect {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+const MAX_OBJECTS = 10;
+const MAX_LEVELS = 4;
+
+/** Rect index for cursor hit-testing; items straddling quadrants are stored in each, so `get` may repeat them. */
+export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
+	private items: T[] = [];
+	private quadrants: Quadtree<T>[] | null = null;
+
+	constructor(
+		private readonly x: number,
+		private readonly y: number,
+		private readonly w: number,
+		private readonly h: number,
+		private readonly level = 0,
+	) {}
+
+	add(item: T): void {
+		if (this.quadrants) {
+			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
+			return;
+		}
+
+		this.items.push(item);
+
+		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
+			this.split();
+			const items = this.items;
+			this.items = [];
+			for (const existing of items) {
+				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
+			}
+		}
+	}
+
+	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
+	get(
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		visit: (item: T) => void,
+	): void {
+		for (const item of this.items) {
+			visit(item);
+		}
+		if (this.quadrants) {
+			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
+				quadrant.get(x, y, w, h, visit),
+			);
+		}
+	}
+
+	private split(): void {
+		const w = this.w / 2;
+		const h = this.h / 2;
+		const level = this.level + 1;
+		// North-east, north-west, south-west, south-east.
+		this.quadrants = [
+			new Quadtree<T>(this.x + w, this.y, w, h, level),
+			new Quadtree<T>(this.x, this.y, w, h, level),
+			new Quadtree<T>(this.x, this.y + h, w, h, level),
+			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
+		];
+	}
+
+	private forEachQuadrant(
+		rect: QuadtreeRect,
+		visit: (quadrant: Quadtree<T>) => void,
+	): void {
+		if (!this.quadrants) {
+			return;
+		}
+		const midX = this.x + this.w / 2;
+		const midY = this.y + this.h / 2;
+		const startsNorth = rect.y < midY;
+		const startsWest = rect.x < midX;
+		// Inclusive, so a zero-size query on a midline still reaches a quadrant.
+		const endsEast = rect.x + rect.w >= midX;
+		const endsSouth = rect.y + rect.h >= midY;
+
+		if (startsNorth && endsEast) {
+			visit(this.quadrants[0]);
+		}
+		if (startsWest && startsNorth) {
+			visit(this.quadrants[1]);
+		}
+		if (startsWest && endsSouth) {
+			visit(this.quadrants[2]);
+		}
+		if (endsEast && endsSouth) {
+			visit(this.quadrants[3]);
+		}
+	}
+}

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

@@ -58,18 +58,23 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
+export const DEFAULT_ASINH_THRESHOLD = 1;
+
 /**
- * Returns uPlot scale distribution options for the Y axis.
- * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for a value axis.
+ * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
+ * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
+	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
+	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -77,6 +82,14 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
+	if (distr === DistributionType.SymmetricLog) {
+		return {
+			distr: 4,
+			log: resolvedLogBase,
+			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
+		};
+	}
+
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -37,6 +37,7 @@ export default function ChartWrapper({
 	syncKey,
 	syncFilterMode,
 	onDestroy = noop,
+	plotRef,
 	children,
 	layoutChildren,
 	yAxisUnit,
@@ -123,6 +124,7 @@ export default function ChartWrapper({
 						height={chartHeight}
 						plotRef={(plot): void => {
 							plotInstanceRef.current = plot;
+							plotRef?.(plot);
 						}}
 						onDestroy={(plot: uPlot): void => {
 							plotInstanceRef.current = null;

frontend/src/lib/visualization/charts/ChartWrapper/__tests__/ChartWrapper.test.tsx

@@ -0,0 +1,45 @@
+import { render } from 'tests/test-utils';
+import type uPlot from 'uplot';
+
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+
+import ChartWrapper from '../ChartWrapper';
+
+const FAKE_PLOT = { id: 'plot' } as unknown as uPlot;
+
+jest.mock('lib/uPlotV2/components/UPlotChart/UPlotChart', () => ({
+	__esModule: true,
+	default: ({ plotRef }: { plotRef?: (plot: uPlot | null) => void }): null => {
+		plotRef?.(FAKE_PLOT);
+		return null;
+	},
+}));
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('ChartWrapper', () => {
+	it('hands the plot instance to the caller', () => {
+		const plotRef = jest.fn();
+		render(
+			<ChartWrapper
+				config={new UPlotConfigBuilder({ id: 'chart' })}
+				data={[[1], [2]]}
+				width={400}
+				height={300}
+				legendConfig={{ position: LegendPosition.BOTTOM }}
+				showLegend={false}
+				showTooltip={false}
+				plotRef={plotRef}
+			/>,
+		);
+
+		expect(plotRef).toHaveBeenCalledWith(FAKE_PLOT);
+	});
+});

frontend/src/lib/visualization/charts/Scatter/Scatter.stories.tsx

@@ -0,0 +1,256 @@
+import { useMemo } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import type { Threshold } from 'lib/uPlotV2/hooks/types';
+import type { ScatterPointLabel } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
+
+import Scatter from './Scatter';
+import { ScatterAxisScale, type ScatterSeries } from './types';
+import { buildScatterConfig, prepareScatterChartData } from './utils';
+
+const SERVICES = [
+	'frontend',
+	'cart',
+	'checkout',
+	'payment',
+	'shipping',
+	'currency',
+	'email',
+	'recommendation',
+	'ads',
+	'product-catalog',
+];
+
+type Shape = 'spread' | 'single' | 'sameX';
+
+interface ScatterStoryProps {
+	groups: number;
+	pointsPerGroup: number;
+	/** Adds an error-count size column. */
+	sized: boolean;
+	xScale: ScatterAxisScale;
+	yScale: ScatterAxisScale;
+	/** Zeroes a share of y values, which forces the symmetric log. */
+	withZeros: boolean;
+	shape: Shape;
+	thresholds: boolean;
+	pointSize: number;
+	/** 0–1. */
+	fillOpacity: number;
+	width: number;
+	height: number;
+}
+
+/** Deterministic, so a story renders the same points on every run. */
+function createRng(seed: number): () => number {
+	let state = seed >>> 0;
+	return (): number => {
+		state = (state * 1664525 + 1013904223) >>> 0;
+		return state / 2 ** 32;
+	};
+}
+
+function buildSeries({
+	groups,
+	pointsPerGroup,
+	sized,
+	withZeros,
+	shape,
+}: ScatterStoryProps): ScatterSeries[] {
+	const rng = createRng(42);
+	return Array.from({ length: groups }, (_, groupIndex) => {
+		const label = SERVICES[groupIndex % SERVICES.length];
+		// Each service sits in its own throughput/latency band, so groups are telling
+		// apart rather than one cloud.
+		const baseThroughput = 20 * 2 ** (groupIndex % 5);
+		const baseLatency = 40 + 60 * (groupIndex % 4);
+
+		const count = shape === 'single' ? 1 : pointsPerGroup;
+		const xs: number[] = [];
+		const ys: number[] = [];
+		const sizes: Array<number | null> = [];
+
+		for (let i = 0; i < count; i++) {
+			const throughput =
+				shape === 'sameX' ? baseThroughput : baseThroughput * (0.5 + rng() * 1.5);
+			// Latency grows with load, plus noise; the odd outlier keeps the axis honest.
+			const outlier = rng() < 0.03 ? 4 + rng() * 6 : 1;
+			let latency =
+				baseLatency *
+				(0.8 + (throughput / baseThroughput) * 0.4 + rng() * 0.3) *
+				outlier;
+			if (withZeros && rng() < 0.2) {
+				latency = 0;
+			}
+			xs.push(Number(throughput.toFixed(2)));
+			ys.push(Number(latency.toFixed(2)));
+			sizes.push(rng() < 0.1 ? null : Math.round(rng() * rng() * 500));
+		}
+
+		return sized ? { label, xs, ys, sizes } : { label, xs, ys };
+	});
+}
+
+const Y_THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 300,
+		thresholdUnit: 'ms',
+		thresholdColor: '#E5484D',
+		thresholdLabel: 'p99 SLO',
+	},
+];
+
+const X_THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 60,
+		thresholdUnit: 'reqps',
+		thresholdColor: '#3E63DD',
+		thresholdLabel: 'Capacity',
+	},
+];
+
+function ScatterStory(props: ScatterStoryProps): JSX.Element {
+	const {
+		xScale,
+		yScale,
+		sized,
+		thresholds,
+		pointSize,
+		fillOpacity,
+		width,
+		height,
+	} = props;
+	const isDarkMode = useIsDarkMode();
+
+	const series = useMemo(() => buildSeries(props), [props]);
+
+	const config = useMemo(
+		() =>
+			buildScatterConfig({
+				id: 'scatter-story',
+				series,
+				isDarkMode,
+				x: {
+					unit: 'reqps',
+					scale: xScale,
+					thresholds: thresholds ? X_THRESHOLDS : undefined,
+				},
+				y: {
+					unit: 'ms',
+					scale: yScale,
+					thresholds: thresholds ? Y_THRESHOLDS : undefined,
+				},
+				pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
+				fillOpacity,
+			}),
+		[series, isDarkMode, xScale, yScale, pointSize, fillOpacity, thresholds],
+	);
+
+	const data = useMemo(() => prepareScatterChartData(series), [series]);
+
+	const resolvePointGroupValues = (
+		seriesIndex: number,
+		dataIndex: number,
+	): ScatterPointLabel[] => [
+		{ key: 'service.name', value: series[seriesIndex - 1]?.label ?? '' },
+		{
+			key: 'k8s.pod.name',
+			value: `pod-${dataIndex.toString().padStart(3, '0')}`,
+		},
+	];
+
+	return (
+		<div style={{ width, padding: 16 }}>
+			<Scatter
+				config={config}
+				data={data}
+				width={width}
+				height={height}
+				legendConfig={{ position: LegendPosition.BOTTOM }}
+				channels={{
+					x: { label: 'Throughput', unit: 'reqps' },
+					y: { label: 'p99 latency', unit: 'ms' },
+					...(sized && { size: { label: 'Errors', unit: 'short' } }),
+				}}
+				resolvePointGroupValues={resolvePointGroupValues}
+				canPinTooltip
+			/>
+		</div>
+	);
+}
+
+const meta = {
+	title: 'Charts/Scatter',
+	component: ScatterStory,
+	parameters: { layout: 'padded' },
+	args: {
+		groups: 1,
+		pointsPerGroup: 10,
+		sized: false,
+		xScale: ScatterAxisScale.Linear,
+		yScale: ScatterAxisScale.Linear,
+		withZeros: false,
+		shape: 'spread',
+		thresholds: false,
+		pointSize: 6,
+		fillOpacity: 0.7,
+		width: 800,
+		height: 420,
+	},
+	argTypes: {
+		shape: { control: 'radio', options: ['spread', 'single', 'sameX'] },
+		xScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
+		yScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
+		fillOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
+		pointSize: { control: { type: 'range', min: 2, max: 16, step: 1 } },
+	},
+} satisfies Meta<ScatterStoryProps>;
+
+export default meta;
+
+type Story = StoryObj<ScatterStoryProps>;
+
+/** One service, ten points: axes formatted with units, hover picks the right point. */
+export const Basic: Story = {};
+
+/** Five services, one legend entry each; toggling a row hides its points. */
+export const Grouped: Story = {
+	args: { groups: 5, pointsPerGroup: 40 },
+};
+
+/** Error count as disc area, between the configured min and max diameters. */
+export const Sized: Story = {
+	args: { groups: 5, pointsPerGroup: 40, sized: true, pointSize: 5 },
+};
+
+/** Log x; a fifth of the latencies are 0, so y falls back to the symmetric log. */
+export const LogAxes: Story = {
+	args: {
+		groups: 5,
+		pointsPerGroup: 60,
+		xScale: ScatterAxisScale.Log,
+		yScale: ScatterAxisScale.Log,
+		withZeros: true,
+	},
+};
+
+/** A single point still gets a padded range rather than an empty plot. */
+export const SinglePoint: Story = {
+	args: { shape: 'single' },
+};
+
+/** Fifty points sharing one x collide on nothing: no shared x array to align. */
+export const SameX: Story = {
+	args: { groups: 3, pointsPerGroup: 50, shape: 'sameX' },
+};
+
+/** Labelled lines on both axes; each scale stretches to include its line. */
+export const Thresholds: Story = {
+	args: { groups: 3, pointsPerGroup: 40, thresholds: true },
+};
+
+/** Perf harness: raise `pointsPerGroup` and read the draw time under the chart. */
+export const Dense: Story = {
+	args: { groups: 5, pointsPerGroup: 1000, pointSize: 4, fillOpacity: 0.5 },
+};

frontend/src/lib/visualization/charts/Scatter/Scatter.tsx

@@ -0,0 +1,98 @@
+import { useCallback, useRef } from 'react';
+import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
+import ScatterTooltip from 'lib/uPlotV2/components/Tooltip/ScatterTooltip';
+import {
+	ScatterTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import { getSeriesStroke } from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
+import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { ScatterChartProps } from 'lib/visualization/charts/types';
+import uPlot from 'uplot';
+
+import { getCursorHit } from './utils';
+
+// Faceted uPlot can't mount without series; empty aligned data shows no-data instead.
+const EMPTY_ALIGNED_DATA: uPlot.AlignedData = [[]];
+
+export default function Scatter(props: ScatterChartProps): JSX.Element {
+	const {
+		children,
+		customTooltip,
+		channels,
+		resolvePointGroupValues,
+		pinnedTooltipElement,
+		onPointClick,
+		plotRef,
+		...rest
+	} = props;
+
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const handlePlotRef = useCallback(
+		(plot: uPlot | null): void => {
+			plotInstanceRef.current = plot;
+			plotRef?.(plot);
+		},
+		[plotRef],
+	);
+
+	// Faceted plots have no shared x; take the hit from the cursor.
+	const handleClick = useCallback(
+		(click: ChartClickData): void => {
+			const plot = plotInstanceRef.current;
+			const hit = plot ? getCursorHit(plot) : null;
+			if (!plot || !hit || !onPointClick) {
+				return;
+			}
+			onPointClick({
+				...hit,
+				color: getSeriesStroke(plot, hit.seriesIndex),
+				coordinates: { x: click.absoluteMouseX, y: click.absoluteMouseY },
+			});
+		},
+		[onPointClick],
+	);
+
+	const renderTooltip = useCallback(
+		(args: TooltipRenderArgs): React.ReactNode => {
+			if (customTooltip) {
+				return customTooltip(args);
+			}
+			const tooltipProps: ScatterTooltipProps = {
+				...args,
+				id: rest.config.getId(),
+				channels,
+				resolvePointGroupValues,
+				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
+				renderTooltipFooter: rest.renderTooltipFooter,
+			};
+			return <ScatterTooltip {...tooltipProps} />;
+		},
+		[
+			customTooltip,
+			channels,
+			resolvePointGroupValues,
+			rest.config,
+			rest.decimalPrecision,
+			rest.canPinTooltip,
+			rest.renderTooltipFooter,
+		],
+	);
+
+	const hasSeries = rest.data.length > 1;
+
+	return (
+		<ChartWrapper
+			{...rest}
+			data={hasSeries ? rest.data : EMPTY_ALIGNED_DATA}
+			plotRef={handlePlotRef}
+			onClick={onPointClick ? handleClick : rest.onClick}
+			customTooltip={renderTooltip}
+			pinnedTooltipElement={pinnedTooltipElement}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/lib/visualization/charts/Scatter/__tests__/axisDistribution.test.ts

@@ -0,0 +1,112 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import { resolveAxisDistribution } from '../axisDistribution';
+import { ScatterAxisScale } from '../types';
+
+describe('resolveAxisDistribution', () => {
+	it('is linear when asked, whatever the values', () => {
+		expect(
+			resolveAxisDistribution([1, 1e6], ScatterAxisScale.Linear),
+		).toStrictEqual({ distribution: DistributionType.Linear });
+	});
+
+	it('is a plain log when every value is positive', () => {
+		expect(resolveAxisDistribution([1, 100], ScatterAxisScale.Log)).toStrictEqual(
+			{ distribution: DistributionType.Logarithmic },
+		);
+	});
+
+	it('falls back from log to a symmetric log around the smallest magnitude when zero is present', () => {
+		expect(
+			resolveAxisDistribution([0, 0.05, 300], ScatterAxisScale.Log),
+		).toStrictEqual({
+			distribution: DistributionType.SymmetricLog,
+			asinhThreshold: 0.01,
+		});
+	});
+
+	it('keeps an explicit log axis for a soft min it cannot place', () => {
+		expect(
+			resolveAxisDistribution([1, 100], ScatterAxisScale.Log, [-10]),
+		).toStrictEqual({ distribution: DistributionType.Logarithmic });
+	});
+
+	it('is a symmetric log when asked, even with only positive values', () => {
+		expect(
+			resolveAxisDistribution([2, 300], ScatterAxisScale.SymLog),
+		).toStrictEqual({
+			distribution: DistributionType.SymmetricLog,
+			asinhThreshold: 1,
+		});
+	});
+
+	it('uses a unit threshold when nothing is positive', () => {
+		expect(
+			resolveAxisDistribution([0, -5], ScatterAxisScale.SymLog),
+		).toStrictEqual({
+			distribution: DistributionType.SymmetricLog,
+			asinhThreshold: 1,
+		});
+	});
+
+	describe('auto', () => {
+		const SKEWED = [1, 2, 3, 5, 8, 10, 20, 50, 1000];
+
+		it.each([
+			['skewed positive values', SKEWED, DistributionType.Logarithmic],
+			[
+				'values spread evenly across decades',
+				[1, 250, 500, 750, 1000],
+				DistributionType.Linear,
+			],
+			[
+				'a single outlier among clustered values',
+				[0.001, 40, 45, 50, 55, 60],
+				DistributionType.Linear,
+			],
+			[
+				'skewed values spanning under two decades',
+				[10, 10, 10, 11, 50],
+				DistributionType.Linear,
+			],
+			['no finite values', [Number.NaN], DistributionType.Linear],
+		])('picks a scale for %s', (_, values, distribution) => {
+			expect(resolveAxisDistribution(values, ScatterAxisScale.Auto)).toStrictEqual(
+				{ distribution },
+			);
+		});
+
+		it('picks symlog for skewed values that include zero', () => {
+			expect(
+				resolveAxisDistribution(
+					[0, 0, 1, 2, 5, 10, 50, 100, 10_000],
+					ScatterAxisScale.Auto,
+				),
+			).toStrictEqual({
+				distribution: DistributionType.SymmetricLog,
+				asinhThreshold: 1,
+			});
+		});
+
+		it('picks symlog when a soft limit reaches zero or below', () => {
+			expect(
+				resolveAxisDistribution(SKEWED, ScatterAxisScale.Auto, [0]),
+			).toStrictEqual({
+				distribution: DistributionType.SymmetricLog,
+				asinhThreshold: 1,
+			});
+		});
+
+		it('counts a soft limit towards the decades it spans', () => {
+			expect(
+				resolveAxisDistribution([5, 50], ScatterAxisScale.Auto, [null, 5000]),
+			).toStrictEqual({ distribution: DistributionType.Logarithmic });
+		});
+
+		it('is the default', () => {
+			expect(resolveAxisDistribution(SKEWED)).toStrictEqual({
+				distribution: DistributionType.Logarithmic,
+			});
+		});
+	});
+});

frontend/src/lib/visualization/charts/Scatter/__tests__/buildScatterConfig.test.ts

@@ -0,0 +1,113 @@
+import type uPlot from 'uplot';
+
+import { ScatterAxisScale, type ScatterSeries } from '../types';
+import { buildScatterConfig } from '../utils';
+
+jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
+	getStoredSeriesVisibility: jest.fn(),
+}));
+
+const SERIES: ScatterSeries[] = [
+	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
+	{ label: 'checkout', xs: [30], ys: [0] },
+];
+
+describe('buildScatterConfig', () => {
+	const build = (
+		overrides: Partial<Parameters<typeof buildScatterConfig>[0]> = {},
+	): ReturnType<typeof buildScatterConfig> =>
+		buildScatterConfig({
+			id: 'scatter',
+			series: SERIES,
+			isDarkMode: true,
+			x: { unit: 'reqps' },
+			y: { unit: 'ms', scale: ScatterAxisScale.Log },
+			...overrides,
+		});
+
+	it('draws a line along both plot edges', () => {
+		const [xAxis, yAxis] = build().getConfig().axes ?? [];
+
+		expect(xAxis?.border?.show).toBe(true);
+		expect(yAxis?.border?.show).toBe(true);
+	});
+
+	it('titles each axis with its label, and leaves an unlabelled one bare', () => {
+		const config = build({
+			x: { unit: 'reqps', label: 'Throughput' },
+			y: { unit: 'ms', label: '' },
+		}).getConfig();
+		const [xAxis, yAxis] = config.axes ?? [];
+
+		expect(xAxis?.label).toBe('Throughput');
+		expect(yAxis?.label).toBeUndefined();
+	});
+
+	it('emits a faceted plot with two value scales', () => {
+		const config = build().getConfig();
+
+		expect(config.mode).toBe(2);
+		expect(config.scales?.x).toMatchObject({ time: false, distr: 1 });
+		// The y column has a 0, so log becomes the symmetric variant.
+		expect(config.scales?.y).toMatchObject({ time: false, distr: 4 });
+	});
+
+	it('draws one faceted series per group with the plugin path builder', () => {
+		const config = build().getConfig();
+		const [, cart, checkout] = config.series ?? [];
+
+		expect(config.series).toHaveLength(3);
+		expect(cart).toMatchObject({
+			label: 'cart',
+			facets: [
+				{ scale: 'x', auto: true },
+				{ scale: 'y', auto: true },
+			],
+		});
+		expect(typeof cart?.paths).toBe('function');
+		expect(cart?.paths).toBe(checkout?.paths);
+		expect(cart?.points?.show).toBe(false);
+	});
+
+	it('formats both axes with their units', () => {
+		const config = build().getConfig();
+		const [xAxis, yAxis] = config.axes ?? [];
+
+		expect(xAxis).toMatchObject({ scale: 'x', side: 2, space: 90 });
+		expect(yAxis).toMatchObject({ scale: 'y', side: 3 });
+		expect(typeof xAxis?.values).toBe('function');
+		expect(typeof yAxis?.values).toBe('function');
+	});
+
+	it('registers a y threshold draw hook when thresholds are given', () => {
+		const config = build({
+			y: {
+				unit: 'ms',
+				thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
+			},
+		}).getConfig();
+
+		expect(config.hooks?.draw).toHaveLength(1);
+		expect(build().getConfig().hooks?.draw).toBeUndefined();
+	});
+
+	it('registers one draw hook per axis with thresholds', () => {
+		const config = build({
+			x: { unit: 'reqps', thresholds: [{ thresholdValue: 15 }] },
+			y: { unit: 'ms', thresholds: [{ thresholdValue: 300 }] },
+		}).getConfig();
+
+		expect(config.hooks?.draw).toHaveLength(2);
+	});
+
+	it('stretches the x range to reach an x threshold', () => {
+		const config = build({
+			x: { unit: 'reqps', thresholds: [{ thresholdValue: 1000 }] },
+		}).getConfig();
+		const range = config.scales?.x?.range as uPlot.Range.Function;
+		const plot = { bbox: { width: 0, height: 0 } } as uPlot;
+		const [, max] = range(plot, 10, 30, 'x');
+
+		expect(max).toBeGreaterThanOrEqual(1000);
+	});
+});

frontend/src/lib/visualization/charts/Scatter/__tests__/scatterRange.test.ts

@@ -0,0 +1,98 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import { createScatterRange } from '../scatterRange';
+import type { ScatterRangeOptions } from '../types';
+
+/** A 220px-tall, 420px-wide plot at a device pixel ratio of 1. */
+const plot = { bbox: { width: 420, height: 220 } } as unknown as uPlot;
+
+function rangeOf(
+	options: Partial<ScatterRangeOptions>,
+	dataMin: number | null,
+	dataMax: number | null,
+): [number, number] {
+	const range = createScatterRange({
+		dimension: 'y',
+		marginPx: 10,
+		distribution: DistributionType.Linear,
+		...options,
+	}) as (u: uPlot, min: number | null, max: number | null) => [number, number];
+	return range(plot, dataMin, dataMax);
+}
+
+describe('createScatterRange', () => {
+	beforeAll(() => {
+		Object.defineProperty(uPlot, 'pxRatio', { value: 1, configurable: true });
+	});
+
+	it('widens a linear range so the data sits marginPx inside each edge', () => {
+		// 200px of data inside 220px: 10px at each end is 1/20 of the span.
+		expect(rangeOf({}, 0, 100)).toStrictEqual([-5, 105]);
+	});
+
+	it('measures the margin along its own axis', () => {
+		// 400px of data inside 420px.
+		expect(rangeOf({ dimension: 'x' }, 0, 100)).toStrictEqual([-2.5, 102.5]);
+	});
+
+	it('pads a log range in decades, without snapping to the next power of ten', () => {
+		const [min, max] = rangeOf(
+			{ distribution: DistributionType.Logarithmic },
+			1,
+			10,
+		);
+		expect(Math.log10(min)).toBeCloseTo(-0.05);
+		expect(Math.log10(max)).toBeCloseTo(1.05);
+	});
+
+	it('pads a symmetric log range in its asinh space', () => {
+		const [min, max] = rangeOf(
+			{ distribution: DistributionType.SymmetricLog, asinhThreshold: 2 },
+			0,
+			20,
+		);
+		const span = Math.asinh(10);
+		expect(Math.asinh(min / 2)).toBeCloseTo(-span / 20);
+		expect(Math.asinh(max / 2)).toBeCloseTo(span + span / 20);
+	});
+
+	it('stretches to the soft limits before padding', () => {
+		expect(rangeOf({ softMin: 0, softMax: 200 }, 50, 100)).toStrictEqual([
+			-10, 210,
+		]);
+	});
+
+	it('ignores a soft min at or below zero on a log scale', () => {
+		const [min] = rangeOf(
+			{ distribution: DistributionType.Logarithmic, softMin: 0 },
+			10,
+			100,
+		);
+		expect(min).toBeGreaterThan(0);
+	});
+
+	it('spreads a single value around itself', () => {
+		const [min, max] = rangeOf({}, 5, 5);
+		expect(min).toBeLessThan(5);
+		expect(max).toBeGreaterThan(5);
+		expect(5 - min).toBeCloseTo(max - 5);
+	});
+
+	it('falls back to a unit range with no data', () => {
+		expect(rangeOf({}, null, null)).toStrictEqual([0, 1]);
+		expect(
+			rangeOf({ distribution: DistributionType.Logarithmic }, null, null),
+		).toStrictEqual([1, 10]);
+	});
+
+	it('skips the margin on a plot too small to hold it', () => {
+		const tiny = { bbox: { width: 15, height: 15 } } as unknown as uPlot;
+		const range = createScatterRange({
+			dimension: 'y',
+			marginPx: 10,
+			distribution: DistributionType.Linear,
+		}) as (u: uPlot, min: number, max: number) => [number, number];
+		expect(range(tiny, 0, 100)).toStrictEqual([0, 100]);
+	});
+});

frontend/src/lib/visualization/charts/Scatter/__tests__/utils.test.ts

@@ -0,0 +1,51 @@
+import type uPlot from 'uplot';
+
+import type { ScatterSeries } from '../types';
+import { getCursorHit, prepareScatterChartData } from '../utils';
+
+jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
+	getStoredSeriesVisibility: jest.fn(),
+}));
+
+const SERIES: ScatterSeries[] = [
+	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
+	{ label: 'checkout', xs: [30], ys: [0] },
+];
+
+describe('prepareScatterChartData', () => {
+	it('lays series out as facets behind an empty x slot', () => {
+		expect(prepareScatterChartData(SERIES)).toStrictEqual([
+			null,
+			[
+				[10, 20],
+				[100, 200],
+				[1, null],
+			],
+			[[30], [0]],
+		]);
+	});
+});
+
+describe('getCursorHit', () => {
+	const plotWith = (idxs: Array<number | null>): uPlot =>
+		({ cursor: { idxs } }) as unknown as uPlot;
+
+	it('reads the series the scatter plugin answered for', () => {
+		expect(getCursorHit(plotWith([null, null, 4, null]))).toStrictEqual({
+			seriesIndex: 2,
+			dataIndex: 4,
+		});
+	});
+
+	it('takes a data index of 0 as a hit', () => {
+		expect(getCursorHit(plotWith([0, 0]))).toStrictEqual({
+			seriesIndex: 1,
+			dataIndex: 0,
+		});
+	});
+
+	it('is null off every dot', () => {
+		expect(getCursorHit(plotWith([null, null]))).toBeNull();
+		expect(getCursorHit({ cursor: {} } as unknown as uPlot)).toBeNull();
+	});
+});

frontend/src/lib/visualization/charts/Scatter/axisDistribution.ts

@@ -0,0 +1,130 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import { getScaleTransform } from './scatterRange';
+import { type AxisDistribution, ScatterAxisScale } from './types';
+
+const LINEAR_DISTRIBUTION: AxisDistribution = {
+	distribution: DistributionType.Linear,
+};
+
+/** Orders of magnitude `auto` needs before it considers leaving linear. */
+export const AUTO_MIN_DECADES = 2;
+
+/** How many times more axis the middle half of the points must cover for `auto` to leave linear. */
+export const AUTO_SPREAD_GAIN = 2;
+
+function getMagnitudeRange(values: number[]): {
+	minMagnitude: number;
+	maxMagnitude: number;
+	hasNonPositive: boolean;
+} {
+	let minMagnitude = Infinity;
+	let maxMagnitude = -Infinity;
+	let hasNonPositive = false;
+	for (const value of values) {
+		if (!Number.isFinite(value)) {
+			continue;
+		}
+		if (value <= 0) {
+			hasNonPositive = true;
+		}
+		if (value !== 0) {
+			minMagnitude = Math.min(minMagnitude, Math.abs(value));
+			maxMagnitude = Math.max(maxMagnitude, Math.abs(value));
+		}
+	}
+	return { minMagnitude, maxMagnitude, hasNonPositive };
+}
+
+/** The linear band ends at the smallest non-zero magnitude so small values still spread. */
+function symmetricLogDistribution(minMagnitude: number): AxisDistribution {
+	const asinhThreshold = Number.isFinite(minMagnitude)
+		? 10 ** Math.floor(Math.log10(minMagnitude))
+		: 1;
+	return { distribution: DistributionType.SymmetricLog, asinhThreshold };
+}
+
+function quantile(sorted: number[], q: number): number {
+	const position = (sorted.length - 1) * q;
+	const lower = Math.floor(position);
+	const upper = Math.ceil(position);
+	return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
+}
+
+/** Share of the axis the middle half of the points covers. */
+function middleHalfSpread(
+	sorted: number[],
+	[min, max]: [number, number],
+	distribution: AxisDistribution,
+): number {
+	const { forward } = getScaleTransform(distribution);
+	const span = forward(max) - forward(min);
+	return span > 0
+		? (forward(quantile(sorted, 0.75)) - forward(quantile(sorted, 0.25))) / span
+		: 0;
+}
+
+/**
+ * Log (symlog with zero or negatives) when it spreads the points out clearly
+ * more than linear does; min/max alone would let one outlier decide.
+ */
+function resolveAutoDistribution(
+	values: number[],
+	softLimits: number[],
+): AxisDistribution {
+	const sorted = values
+		.filter((value) => Number.isFinite(value))
+		.sort((a, b) => a - b);
+	if (sorted.length < 2) {
+		return LINEAR_DISTRIBUTION;
+	}
+	const { minMagnitude, maxMagnitude, hasNonPositive } = getMagnitudeRange([
+		...sorted,
+		...softLimits,
+	]);
+	if (!(Math.log10(maxMagnitude / minMagnitude) >= AUTO_MIN_DECADES)) {
+		return LINEAR_DISTRIBUTION;
+	}
+	const candidate = hasNonPositive
+		? symmetricLogDistribution(minMagnitude)
+		: { distribution: DistributionType.Logarithmic };
+	const extent: [number, number] = [
+		Math.min(sorted[0], ...softLimits),
+		Math.max(sorted[sorted.length - 1], ...softLimits),
+	];
+	const candidateSpread = middleHalfSpread(sorted, extent, candidate);
+	const linearSpread = middleHalfSpread(sorted, extent, LINEAR_DISTRIBUTION);
+	return candidateSpread > 0 &&
+		candidateSpread >= AUTO_SPREAD_GAIN * linearSpread
+		? candidate
+		: LINEAR_DISTRIBUTION;
+}
+
+/** `log` falls back to symlog rather than drop zero or negatives; callers filter first to drop them. */
+export function resolveAxisDistribution(
+	values: number[],
+	scale: ScatterAxisScale = ScatterAxisScale.Auto,
+	/** Soft limits and thresholds the axis must reach; only `auto` weighs them. */
+	softLimits: Array<number | null | undefined> = [],
+): AxisDistribution {
+	switch (scale) {
+		case ScatterAxisScale.Linear:
+			return LINEAR_DISTRIBUTION;
+		case ScatterAxisScale.SymLog:
+			return symmetricLogDistribution(getMagnitudeRange(values).minMagnitude);
+		case ScatterAxisScale.Log: {
+			const { minMagnitude, hasNonPositive } = getMagnitudeRange(values);
+			return hasNonPositive
+				? symmetricLogDistribution(minMagnitude)
+				: { distribution: DistributionType.Logarithmic };
+		}
+		case ScatterAxisScale.Auto:
+		default:
+			return resolveAutoDistribution(
+				values,
+				softLimits.filter(
+					(limit): limit is number => limit != null && Number.isFinite(limit),
+				),
+			);
+	}
+}

frontend/src/lib/visualization/charts/Scatter/scatterRange.ts

@@ -0,0 +1,92 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import { DEFAULT_ASINH_THRESHOLD } from 'lib/uPlotV2/utils/scale';
+import uPlot from 'uplot';
+
+import type {
+	AxisDistribution,
+	ScaleTransform,
+	ScatterRangeOptions,
+} from './types';
+
+export function getScaleTransform({
+	distribution,
+	asinhThreshold = DEFAULT_ASINH_THRESHOLD,
+}: AxisDistribution): ScaleTransform {
+	switch (distribution) {
+		case DistributionType.Logarithmic:
+			return {
+				forward: (value): number => Math.log10(value),
+				inverse: (position): number => 10 ** position,
+			};
+		case DistributionType.SymmetricLog:
+			return {
+				forward: (value): number => Math.asinh(value / asinhThreshold),
+				inverse: (position): number => Math.sinh(position) * asinhThreshold,
+			};
+		default:
+			return {
+				forward: (value): number => value,
+				inverse: (position): number => position,
+			};
+	}
+}
+
+/** In transformed units. */
+const SINGLE_VALUE_HALF_SPAN = 0.5;
+
+/** The data's extent stretched to the soft limits; null with neither. */
+function resolveExtent(
+	dataMin: number | null,
+	dataMax: number | null,
+	softMin: number | null | undefined,
+	softMax: number | null | undefined,
+): [number, number] | null {
+	const lows = [dataMin, softMin].filter(
+		(value): value is number => value != null && Number.isFinite(value),
+	);
+	const highs = [dataMax, softMax].filter(
+		(value): value is number => value != null && Number.isFinite(value),
+	);
+	return lows.length > 0 && highs.length > 0
+		? [Math.min(...lows), Math.max(...highs)]
+		: null;
+}
+
+/** Data extent padded by `marginPx` so edge dots draw whole; log stays unsnapped (snapping after the margin can add an empty decade). */
+export function createScatterRange({
+	dimension,
+	marginPx,
+	softMin,
+	softMax,
+	...distribution
+}: ScatterRangeOptions): uPlot.Scale.Range {
+	const transform = getScaleTransform(distribution);
+	const isLog = distribution.distribution === DistributionType.Logarithmic;
+
+	// A log scale cannot place a soft limit at or below zero.
+	const usableSoftMin = isLog && (softMin ?? 0) <= 0 ? null : softMin;
+
+	return (u, dataMin, dataMax): uPlot.Range.MinMax => {
+		const extent = resolveExtent(dataMin, dataMax, usableSoftMin, softMax);
+		if (!extent) {
+			return isLog ? [1, 10] : [0, 1];
+		}
+
+		let start = transform.forward(extent[0]);
+		let end = transform.forward(extent[1]);
+		if (start === end) {
+			start -= SINGLE_VALUE_HALF_SPAN;
+			end += SINGLE_VALUE_HALF_SPAN;
+		}
+
+		const plotPx =
+			(dimension === 'x' ? u.bbox.width : u.bbox.height) / uPlot.pxRatio;
+		if (plotPx > 2 * marginPx) {
+			const pad = ((end - start) * marginPx) / (plotPx - 2 * marginPx);
+			start -= pad;
+			end += pad;
+		}
+
+		return [transform.inverse(start), transform.inverse(end)];
+	};
+}

frontend/src/lib/visualization/charts/Scatter/types.ts

@@ -0,0 +1,67 @@
+import type { PrecisionOption } from 'components/Graph/types';
+import type {
+	DistributionType,
+	SelectionPreferencesSource,
+} from 'lib/uPlotV2/config/types';
+import type { Threshold } from 'lib/uPlotV2/hooks/types';
+import type { ScatterPointSize } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
+
+export interface ScatterSeries {
+	label: string;
+	xs: number[];
+	ys: number[];
+	/** Optional third channel, in the caller's units. */
+	sizes?: Array<number | null>;
+}
+
+export enum ScatterAxisScale {
+	/** Log or symlog when it spreads the points out more than linear does. */
+	Auto = 'auto',
+	Linear = 'linear',
+	Log = 'log',
+	/** Log-like, but places zero and negatives. */
+	SymLog = 'symlog',
+}
+
+export interface ScatterAxisOptions {
+	label?: string;
+	unit?: string;
+	softMin?: number | null;
+	softMax?: number | null;
+	scale?: ScatterAxisScale;
+	/** Lines drawn across the plot at values on this axis. */
+	thresholds?: Threshold[];
+}
+
+export interface BuildScatterConfigArgs {
+	id: string;
+	series: ScatterSeries[];
+	isDarkMode: boolean;
+	x: ScatterAxisOptions;
+	y: ScatterAxisOptions;
+	pointSize?: ScatterPointSize;
+	/** 0–1. */
+	fillOpacity?: number;
+	colorMapping?: Record<string, string>;
+	decimalPrecision?: PrecisionOption;
+	selectionPreferencesSource?: SelectionPreferencesSource;
+	shouldSaveSelectionPreference?: boolean;
+}
+
+export interface AxisDistribution {
+	distribution: DistributionType;
+	asinhThreshold?: number;
+}
+
+export interface ScaleTransform {
+	forward: (value: number) => number;
+	inverse: (position: number) => number;
+}
+
+export interface ScatterRangeOptions extends AxisDistribution {
+	dimension: 'x' | 'y';
+	/** CSS pixels kept clear at each end so the largest dot draws whole. */
+	marginPx: number;
+	softMin?: number | null;
+	softMax?: number | null;
+}

frontend/src/lib/visualization/charts/Scatter/utils.ts

@@ -0,0 +1,209 @@
+import {
+	type AxisProps,
+	DistributionType,
+	DrawStyle,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import {
+	applyScatterPlugin,
+	createScatterPlugin,
+	SCATTER_FACETS,
+} from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
+import {
+	DEFAULT_SCATTER_POINT_SIZE,
+	ScatterChartData,
+	ScatterSeriesData,
+} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
+import {
+	logScaleSplits,
+	spacedLogLabels,
+} from 'lib/uPlotV2/utils/logGridSplits';
+import { adjustSoftLimitsWithThresholds } from 'lib/uPlotV2/utils/scale';
+import uPlot from 'uplot';
+
+import { resolveAxisDistribution } from './axisDistribution';
+import { createScatterRange } from './scatterRange';
+import type {
+	AxisDistribution,
+	BuildScatterConfigArgs,
+	ScatterAxisOptions,
+	ScatterSeries,
+} from './types';
+
+const POINT_STROKE_WIDTH = 1;
+
+/** Unit-suffixed x labels are wider than uPlot's 50px default assumes. */
+const X_AXIS_TICK_SPACE_PX = 90;
+const X_AXIS_END_LABEL_PADDING_PX = 40;
+
+/** The plugin's `dataIdx` answers only for the hit series. */
+export function getCursorHit(
+	plot: uPlot,
+): { seriesIndex: number; dataIndex: number } | null {
+	const idxs = plot.cursor.idxs ?? [];
+	for (let seriesIndex = 1; seriesIndex < idxs.length; seriesIndex++) {
+		const dataIndex = idxs[seriesIndex];
+		if (dataIndex != null) {
+			return { seriesIndex, dataIndex };
+		}
+	}
+	return null;
+}
+
+/** `[null, [xs, ys, sizes?], …]`: uPlot's faceted layout, series 0 empty. */
+export function prepareScatterChartData(
+	series: ScatterSeries[],
+): uPlot.AlignedData {
+	const data: ScatterChartData = [
+		null,
+		...series.map((entry): ScatterSeriesData =>
+			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
+		),
+	];
+	return data as unknown as uPlot.AlignedData;
+}
+
+/** The scatter range is unsnapped, so a log axis places and labels its own ticks. */
+function getLogAxisTicks({
+	distribution,
+}: AxisDistribution): Pick<AxisProps, 'splits' | 'filter'> {
+	return distribution === DistributionType.Logarithmic
+		? { splits: logScaleSplits, filter: spacedLogLabels }
+		: {};
+}
+
+function getThresholdOptions(
+	scaleKey: 'x' | 'y',
+	{ thresholds, unit }: ScatterAxisOptions,
+): ThresholdsDrawHookOptions | undefined {
+	return thresholds && thresholds.length > 0
+		? { scaleKey, thresholds, yAxisUnit: unit }
+		: undefined;
+}
+
+export function buildScatterConfig({
+	id,
+	series,
+	isDarkMode,
+	x,
+	y,
+	pointSize = DEFAULT_SCATTER_POINT_SIZE,
+	fillOpacity,
+	colorMapping = {},
+	decimalPrecision,
+	selectionPreferencesSource,
+	shouldSaveSelectionPreference,
+}: BuildScatterConfigArgs): UPlotConfigBuilder {
+	const builder = new UPlotConfigBuilder({
+		id,
+		selectionPreferencesSource,
+		shouldSaveSelectionPreference,
+	});
+
+	const plugin = createScatterPlugin({ pointSize });
+	applyScatterPlugin(builder, plugin);
+	// The last x label is centred on the plot's right edge; room for its unit.
+	builder.setPadding([16, X_AXIS_END_LABEL_PADDING_PX, 8, 8]);
+
+	const xSoftLimits = adjustSoftLimitsWithThresholds(
+		x.softMin ?? null,
+		x.softMax ?? null,
+		x.thresholds,
+		x.unit,
+	);
+	const ySoftLimits = adjustSoftLimitsWithThresholds(
+		y.softMin ?? null,
+		y.softMax ?? null,
+		y.thresholds,
+		y.unit,
+	);
+	const xDistribution = resolveAxisDistribution(
+		series.flatMap((entry) => entry.xs),
+		x.scale,
+		[xSoftLimits.softMin, xSoftLimits.softMax],
+	);
+	const yDistribution = resolveAxisDistribution(
+		series.flatMap((entry) => entry.ys),
+		y.scale,
+		[ySoftLimits.softMin, ySoftLimits.softMax],
+	);
+
+	const xThresholds = getThresholdOptions('x', x);
+	const yThresholds = getThresholdOptions('y', y);
+
+	// The largest disc drawn, plus its outline, kept clear of each plot edge.
+	const largestDiameter = series.some((entry) => entry.sizes)
+		? pointSize.max
+		: pointSize.fixed;
+	const marginPx = largestDiameter / 2 + POINT_STROKE_WIDTH;
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		range: createScatterRange({
+			dimension: 'x',
+			marginPx,
+			...xSoftLimits,
+			...xDistribution,
+		}),
+		...xDistribution,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		range: createScatterRange({
+			dimension: 'y',
+			marginPx,
+			...ySoftLimits,
+			...yDistribution,
+		}),
+		...yDistribution,
+	});
+
+	builder.addAxis({
+		scaleKey: 'x',
+		side: 2,
+		label: x.label || undefined,
+		isDarkMode,
+		isTimeAxis: false,
+		yAxisUnit: x.unit ?? '',
+		decimalPrecision,
+		isLogScale: xDistribution.distribution !== DistributionType.Linear,
+		...getLogAxisTicks(xDistribution),
+		space: X_AXIS_TICK_SPACE_PX,
+	});
+	builder.addAxis({
+		scaleKey: 'y',
+		side: 3,
+		label: y.label || undefined,
+		isDarkMode,
+		yAxisUnit: y.unit ?? '',
+		decimalPrecision,
+		isLogScale: yDistribution.distribution !== DistributionType.Linear,
+		...getLogAxisTicks(yDistribution),
+	});
+
+	series.forEach((entry) => {
+		builder.addSeries({
+			scaleKey: 'y',
+			label: entry.label,
+			colorMapping,
+			drawStyle: DrawStyle.Scatter,
+			pathBuilder: plugin.pathBuilder,
+			facets: SCATTER_FACETS,
+			lineWidth: POINT_STROKE_WIDTH,
+			pointSize: pointSize.fixed,
+			fillOpacity,
+			isDarkMode,
+		});
+	});
+
+	[xThresholds, yThresholds].forEach((options) => {
+		if (options) {
+			builder.addThresholds(options);
+		}
+	});
+
+	return builder;
+}

frontend/src/lib/visualization/charts/types.ts

@@ -16,6 +16,10 @@ import type {
 	HeatmapColorOptions,
 	HeatmapSeries,
 } from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
+import type {
+	ScatterChannels,
+	ScatterPointLabel,
+} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -88,6 +92,26 @@ export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
+/** The dot a click landed on; `seriesIndex` is uPlot's, so the first series is 1. */
+export interface ScatterPointClick {
+	seriesIndex: number;
+	dataIndex: number;
+	color: string;
+	/** Viewport coordinates of the click. */
+	coordinates: { x: number; y: number };
+}
+
+/** `data` is mode-2 (`prepareScatterChartData`); `config` comes from `buildScatterConfig`. */
+export interface ScatterChartProps extends ChartWrapperProps {
+	channels: ScatterChannels;
+	resolvePointGroupValues?: (
+		seriesIndex: number,
+		dataIndex: number,
+	) => ScatterPointLabel[];
+	/** Fires for a click on a dot; a click on empty plot space fires nothing. */
+	onPointClick?: (click: ScatterPointClick) => void;
+}
+
 /**
  * Data arrives as the query response carries it — bucket bounds plus one series per
  * group — and the chart pivots and sums it, so no caller has to get the transpose

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -7,8 +7,8 @@ import { Switch } from '@signozhq/ui/switch';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
 import {
-	useAlertRuleClone,
 	useAlertRuleDelete,
+	useAlertRuleDuplicate,
 	useAlertRuleStatusToggle,
 	useAlertRuleUpdate,
 } from 'pages/AlertDetails/hooks';
@@ -38,7 +38,9 @@ function AlertActionButtons({
 	const isDarkMode = useIsDarkMode();
 
 	const { handleAlertStateToggle } = useAlertRuleStatusToggle({ ruleId });
-	const { handleAlertClone } = useAlertRuleClone({ ruleId });
+	const { handleAlertDuplicate } = useAlertRuleDuplicate({
+		alertDetails: alertDetails as unknown as AlertDef,
+	});
 	const { handleAlertDelete } = useAlertRuleDelete({ ruleId });
 	const { handleAlertUpdate, isLoading } = useAlertRuleUpdate({
 		alertDetails: alertDetails as unknown as AlertDef,
@@ -70,10 +72,10 @@ function AlertActionButtons({
 	menuItems.push(
 		{
 			type: 'item',
-			value: 'clone-rule',
-			label: 'Clone',
+			value: 'duplicate-rule',
+			label: 'Duplicate',
 			prefix: <Copy size={16} color={Color.BG_VANILLA_400} />,
-			onClick: handleAlertClone,
+			onClick: handleAlertDuplicate,
 		},
 		{
 			type: 'item',

frontend/src/pages/AlertDetails/hooks.tsx

@@ -6,7 +6,7 @@ import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import { patchRulePartial } from 'api/alerts/patchRulePartial';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
-	cloneRuleByID,
+	createRule,
 	deleteRuleByID,
 	getGetRuleByIDQueryKey,
 	getGetRuleHistoryTimelineQueryOptions,
@@ -17,6 +17,7 @@ import {
 	useGetRuleHistoryOverallStatus,
 	useGetRuleHistoryStats,
 	useGetRuleHistoryTopContributors,
+	useListRules,
 } from 'api/generated/services/rules';
 import {
 	Querybuildertypesv5OrderDirectionDTO,
@@ -477,32 +478,39 @@ export const useAlertRuleStatusToggle = ({
 	return { handleAlertStateToggle };
 };
 
-export const useAlertRuleClone = ({
-	ruleId,
+export const useAlertRuleDuplicate = ({
+	alertDetails,
 }: {
-	ruleId: string;
+	alertDetails: AlertDef;
 }): {
-	handleAlertClone: () => void;
+	handleAlertDuplicate: () => void;
 } => {
 	const { notifications } = useNotifications();
-	const queryClient = useQueryClient();
 
 	const params = useUrlQuery();
 
+	const { refetch } = useListRules({
+		query: { cacheTime: 0 },
+	});
 	const { showErrorModal } = useErrorModal();
-	const { mutate: cloneAlert } = useMutation(
-		[REACT_QUERY_KEY.CLONE_ALERT_RULE],
-		() => cloneRuleByID({ id: ruleId }),
+	const { mutate: duplicateAlert } = useMutation(
+		[REACT_QUERY_KEY.DUPLICATE_ALERT_RULE],
+		(args: { data: AlertDef }) =>
+			createRule(toPostableRuleDTOFromAlertDef(args.data)),
 		{
-			onSuccess: async (response) => {
+			onSuccess: async () => {
 				notifications.success({
 					message: `Success`,
 				});
 
-				await invalidateListRules(queryClient);
+				const { data: allAlertsData } = await refetch();
 
-				params.set(QueryParams.ruleId, response.data.id);
-				history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+				const rules = allAlertsData?.data;
+				if (rules && rules.length > 0) {
+					const clonedAlert = rules[rules.length - 1];
+					params.set(QueryParams.ruleId, String(clonedAlert.id));
+					history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+				}
 			},
 			onError: (error) =>
 				showErrorModal(
@@ -511,13 +519,15 @@ export const useAlertRuleClone = ({
 		},
 	);
 
-	const handleAlertClone = (): void => {
-		cloneAlert();
+	const handleAlertDuplicate = (): void => {
+		const args = {
+			data: { ...alertDetails, alert: alertDetails.alert?.concat(' - Copy') },
+		};
+		duplicateAlert(args);
 	};
 
-	return { handleAlertClone };
+	return { handleAlertDuplicate };
 };
-
 export const useAlertRuleUpdate = ({
 	alertDetails,
 	setAlertRuleName,

frontend/src/pages/AlertList/AlertRules/stories/AlertRules.stories.mocks.tsx

@@ -107,7 +107,7 @@ export const alertRulesMocks = defineStoryMocks({
 			})),
 		),
 
-		rest.post('http://localhost/api/v2/rules/:id/clone', (_req, res, ctx) =>
+		rest.post('http://localhost/api/v2/rules', (_req, res, ctx) =>
 			actionResponse(values.cloneState, res, ctx, () => ({
 				status: 'success',
 				data: alertRulesResponse(1, {

frontend/src/pages/AlertList/Channels/stories/Channels.stories.tsx

@@ -58,12 +58,6 @@ export const Default: Story = {};
 /** A workspace with nowhere to send an alert yet. */
 export const NoChannels: Story = {
 	args: { channels: 0 },
-	play: async ({ canvasElement }): Promise<void> => {
-		const canvas = within(canvasElement);
-
-		await canvas.findByTestId('channels-empty-state', undefined, UNTIL_LOADED);
-		await canvas.findByTestId('channels-empty-create');
-	},
 };
 
 /** Data: the channel list's existing loading spinner. */
@@ -111,24 +105,10 @@ export const KindFilter: Story = {
 			UNTIL_LOADED,
 		);
 		await canvas.findByText('sre-email');
-		// the heading and the create button both name the filtered type
-		await canvas.findByText('All Email channels');
 	},
 };
 
-/** Interaction: the column menu, which turns table columns off and on. */
-export const ColumnSelector: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		const canvas = within(canvasElement);
-
-		await canvas.findByText('ops-slack', undefined, UNTIL_LOADED);
-		await userEvent.click(canvas.getByTestId('channels-columns'));
-
-		await screen.findByText('Toggle Columns');
-	},
-};
-
-/** Interaction: a search that matches no channel. */
+/** Interaction: a search matching nothing offers to clear itself. */
 export const NoResults: Story = {
 	play: async ({ canvasElement }): Promise<void> => {
 		const canvas = within(canvasElement);
@@ -140,21 +120,6 @@ export const NoResults: Story = {
 		);
 
 		await canvas.findByText('No matching channels', undefined, UNTIL_LOADED);
-	},
-};
-
-/** Interaction: clearing the search from the empty state brings the list back. */
-export const ClearSearch: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		const canvas = within(canvasElement);
-
-		await canvas.findByText('ops-slack', undefined, UNTIL_LOADED);
-		await userEvent.type(
-			canvas.getByTestId('channels-search'),
-			'no-such-channel',
-		);
-		await canvas.findByText('No matching channels', undefined, UNTIL_LOADED);
-
 		await userEvent.click(canvas.getByRole('button', { name: 'Clear Search' }));
 		await canvas.findByText('ops-slack', undefined, UNTIL_LOADED);
 	},

frontend/src/pages/AlertList/ChannelsEdit/stories/ChannelsEdit.stories.tsx

@@ -90,16 +90,13 @@ export const SaveFailure: Story = {
 	// the point of the story, not a regression.
 	parameters: { allowConsoleErrors: true },
 	play: async ({ canvasElement }): Promise<void> => {
-		const canvas = within(canvasElement);
-
-		// Save is off until the form is edited, so the failure is reached through
-		// a real change rather than an empty submit.
-		await userEvent.type(
-			await canvas.findByTestId('slack-channel-textbox', undefined, untilLoaded),
-			'-edited',
+		await userEvent.click(
+			await within(canvasElement).findByTestId(
+				'save-channel-button',
+				undefined,
+				untilLoaded,
+			),
 		);
-		await userEvent.click(canvas.getByTestId('save-channel-button'));
-
 		await screen.findByText('Storybook forced channel failure');
 	},
 };

frontend/src/pages/AlertList/ChannelsEdit/stories/authz/ChannelsEdit.authz.stories.tsx

@@ -82,12 +82,6 @@ export const NoCreate: Story = {
 		await expectDisabled(
 			await canvas.findByTestId('test-channel-button', undefined, PAGE_LOAD),
 		);
-		// Save is also off until the form is edited, so the edit comes first and
-		// what is left is the permission.
-		await userEvent.type(
-			await canvas.findByTestId('slack-channel-textbox', undefined, PAGE_LOAD),
-			'-edited',
-		);
 		await expectDisabled(
 			await canvas.findByTestId('save-channel-button', undefined, PAGE_LOAD),
 			false,
@@ -174,13 +168,12 @@ export const CheckFailed: Story = {
 	// point of the story, not a regression.
 	parameters: { allowConsoleErrors: true },
 	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-
-		await userEvent.type(
-			await canvas.findByTestId('slack-channel-textbox', undefined, PAGE_LOAD),
-			'-edited',
+		const save = await within(canvasElement).findByTestId(
+			'save-channel-button',
+			undefined,
+			PAGE_LOAD,
 		);
 
-		await expectDisabled(canvas.getByTestId('save-channel-button'), false);
+		await expectDisabled(save, false);
 	},
 };