feat(dashboard): use colorBy and sizeBy in the scatter plot, labelled Color by and Size by

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/skills/signoz-page-story/references/verify.md

@@ -58,10 +58,8 @@ 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
+(`&globals=theme:light`): text extraction does not catch an unstyled page.
 
 ## Gates
 

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

@@ -0,0 +1,294 @@
+---
+name: storybook-visual-diff
+description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
+---
+
+# Storybook visual diff
+
+Two scripts under `frontend/scripts`:
+
+- `story-shots.mjs` — screenshots stories off a running Storybook dev server.
+- `story-shots-diff.mjs` — pixel-diffs two runs and paints what moved.
+
+Output goes to `frontend/.story-shots/` (gitignored), one directory per run.
+
+## 0. Settle what is being compared, first
+
+A diff is only worth taking when the two runs straddle something. Run twice over
+the same tree and the answer is zero, or the noise floor: true, and useless.
+So before starting a server, pin down four things. Whatever the prompt already
+says, take it and do not ask again; ask only for what is genuinely missing, in
+**one** `AskUserQuestion` call.
+
+| To settle | Ask | Options |
+| --- | --- | --- |
+| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
+| Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
+| Themes | "Which themes?" | dark · dark + light |
+| Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
+
+Skip a row when the prompt answers it, and skip the whole call when the prompt
+answers all of it ("shoot the pods tooltips in both themes" needs no question).
+Skip Read-out too whenever the job is *shoot only*, and take `none` for what it
+says: shoot both sides, report both paths, run no comparison. When the prompt
+says nothing at all, ask; a silent guess here burns ~6 min per sweep on the
+wrong stories.
+
+The job decides which loop below to run:
+
+| Job | Loop |
+| --- | --- |
+| **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
+| **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
+| **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
+| **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
+| **noise floor** | two runs, same tree, diff. The number is the harness's floor, not a finding. |
+| **config vs config** | same tree, two runs that differ only in flags: `--args`, `--clock`, `--width`, `--theme`, `--motion`. Filenames stay identical, so the pairs line up and the caption names what changed. |
+
+## The loop
+
+1. Capture the baseline **before touching anything**.
+2. Capture it a second time and diff the two. That is the noise floor: anything
+   it reports is what the harness cannot hold still, and no conclusion about the
+   change may rest on those stories. Cheap on a handful of stories, ~6 min per
+   32, so on a wide sweep run it over the two or three stories the change is
+   aimed at instead of all of them.
+3. Make the change.
+4. Capture again into a third directory.
+5. Diff, then read the tinted shot of the largest movers to judge the change.
+
+## 1. One dev server, on a free port
+
+`storybook dev` keys its Vite dep cache off the config dir, so two servers on the
+same `-c` serve mismatched prebundles and every story dies with `Invalid hook
+call`. Check what is already up first — port 6006 is often another repo's
+Storybook, and its `index.json` then indexes the wrong stories:
+
+```bash
+for port in 6006 6007; do
+  curl -s -m 2 "http://localhost:$port/index.json" | head -c 60 && echo "  <- $port"
+done
+```
+
+Start the SigNoz one on a free port, from the repo's own binary so no package
+manager shim is in the way:
+
+```bash
+cd frontend
+nohup ./node_modules/.bin/storybook dev -p 6007 --no-open --quiet \
+  > "${TMPDIR:-/tmp}/signoz-storybook.log" 2>&1 &
+```
+
+It is ready when `curl -s localhost:6007/index.json` returns JSON whose
+`entries` hold SigNoz story ids.
+
+## 2. Capture
+
+Playwright is not a frontend dependency. The script finds it in `tests/e2e`
+(`pnpm -C tests/e2e install`, `@playwright/test` is enough) or in a global
+install, and launches Playwright's own chromium, falling back to an installed
+Chrome. Two escape hatches when that is not what a machine has:
+
+```bash
+export PLAYWRIGHT_MODULE=/path/to/playwright   # a different install
+export CHROME_PATH=/path/to/chrome             # a specific browser binary
+```
+
+Then pick the stories. `--list` prints the selection without shooting anything:
+
+```bash
+# every tooltip story of every page
+node scripts/story-shots.mjs .story-shots/baseline \
+  --port 6007 --title Pages/ --name tooltip --theme dark
+
+# a handful of stories by id or by title/name substring, both themes
+node scripts/story-shots.mjs .story-shots/baseline \
+  --port 6007 --stories pages-noz,dashboards/detail --theme dark,light
+```
+
+| Flag | Meaning |
+| --- | --- |
+| `--stories <match>` | id or `Title/Name` substring, repeatable or comma-separated. Omit for every story. |
+| `--title <prefix>` | only titles starting with the prefix (`Pages/`, `Components/`) |
+| `--name <match>` | only story names containing the match |
+| `--theme dark,light` | one pass per theme; omit for the story's own default (dark) |
+| `--args <k:v;k2:v2>` | arg overrides, Storybook's own `?args=` syntax, repeatable. A dotted value is dropped by Storybook itself, so map it to a slug inside the story's mocks |
+| `--port` | dev server port, or `$SB_PORT` |
+| `--width <px>` | the only fixed dimension, default 1680 |
+| `--height <px>` | shortest the viewport may be, default 1200 |
+| `--max-height <px>` | tallest it may grow to, default 8000 |
+| `--grow <what>` | `scrollers` (default) grows the viewport until the page's own scrollers fit, `document` only follows the document height, `none` keeps `--height` |
+| `--settle <ms>` | wait after the page goes quiet, default 1500 |
+| `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
+| `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
+| `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
+| `--flat` | write `<out>/<id>.png`, no theme directory |
+| `--no-caption` | leave the caption band off the shots |
+| `--list` | print the matched stories and exit |
+
+Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
+what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
+rows) and how the run was configured (args, clock, width, height, grow, motion,
+settle, ignore). Keep the flags identical between the two runs or the diff pairs
+nothing.
+
+Every shot carries the caption band described below, so a single screenshot says
+what it is on its own. `--no-caption` leaves it off, and so does a machine
+without ImageMagick (with a warning). The band never changes the shot's width
+(long text wraps rather than widening the canvas) and its height is recorded, so
+the diff crops it back off and never reports one caption against another. Two
+runs whose captions are different heights still diff to zero. A story that never held still for two
+identical frames is logged `busy` instead of `ok` — treat its diff as suspect.
+
+Dark alone is enough while iterating on the harness; add `light` for the run you
+report.
+
+## 3. Diff
+
+```bash
+node scripts/story-shots-diff.mjs .story-shots/baseline .story-shots/capped .story-shots/diff
+```
+
+Prints `<changed pixels>  <theme>/<story>.png`, largest first, and writes one
+image per pair. Needs ImageMagick for PNG encode/decode (7's `magick`, or 6's
+`convert`/`identify`/`montage`); the comparison itself is in the script.
+
+| Flag | Meaning |
+| --- | --- |
+| `--mode green` | default. The after shot with the changed pixels painted over it, exactly the pixels that changed. What Chromatic shows. |
+| `--mode green-parallel` | `previous \| current \| diff` in one image, each tile labelled above it, on a gutter inverted from the theme. The diff tile is the `green` one, so the after shot stays readable underneath. |
+| `--mode red` | the after shot faded to 10%, changed pixels in red. A pixelmatch-style diff, easiest to read when the change is a thin edge. |
+| `--mode red-parallel` | the same three tiles, with the `red` diff. Best when the change is a thin edge that the unfaded shot would swallow. |
+| `--threshold <0..1>` | how far a pixel must move to count. Default 0.063, Chromatic's `diffThreshold`. |
+| `--include-aa` | count antialiasing changes too. Off by default, as in Chromatic. |
+| `--tint <#rrggbb>` | override the mode's colour. |
+| `--no-caption` | drop the caption band. |
+
+### The caption
+
+Both scripts stamp a band on top of what they write: `story-shots.mjs` on each
+shot, from the story and the run's own settings; `story-shots-diff.mjs` on each
+diff, read out of the two runs' `shots.json`. It carries the story's
+`Title/Name`, then its id, theme and `busy` flag, then the settings both runs
+shared, each reading `key:value`. Whatever the two runs did **differently** goes
+on the side it belongs to: under `previous` and `current` on the parallel tiles,
+on two lines of the band otherwise. So a pair that differs only in `--args` says
+so on its face, which is what makes several shots of one story tellable apart.
+
+The shots' own bands are cropped off before comparing and before going into the
+tiles, so nothing in the output is a diff of a caption. Type size follows the
+image width, so it stays readable with the whole image viewed at fit-to-width;
+the heading is set in an installed sans and the detail lines in a mono, falling
+back to ImageMagick's default when neither is on the machine. Without a manifest
+the band falls back to the file path, and a directory of captioned shots whose
+`shots.json` is missing has nothing to crop by, so its captions do land in the
+diff. Keep `shots.json` next to the shots.
+
+### How the comparison works
+
+Chromatic's own capture and diff run server-side — `chromatic-cli` uploads a
+built Storybook and contains no capture or comparison code at all. What is public
+is the parameter contract, and the numbers in it say what the comparison is:
+`diffThreshold` defaults to `0.063` on a 0-1 scale, which is pixelmatch's
+`threshold`, and `diffIncludeAntiAliasing` defaults to false, which is
+pixelmatch's `includeAA: false`. So the script implements that comparison:
+
+1. Both PNGs are read as raw RGBA through `magick … RGBA:-`.
+2. Per pixel, the squared YIQ distance between the two colours (weights
+   `0.5053 / 0.299 / 0.1957`), compared against `35215 * threshold²` — 35215 is
+   the largest distance two 8-bit colours can have. Chroma is included, so a
+   colour swap at equal brightness still counts.
+3. A pixel over the threshold is dropped when it is only antialiasing: it is the
+   darkest or lightest of its eight neighbours, and the other image has a pixel
+   around there doing the same job. This is what keeps a subpixel glyph edge from
+   reading as a change.
+4. What survives is painted at full opacity, one output pixel per changed input
+   pixel. No dilation, no blobs — a one-pixel shift shows as a one-pixel line.
+
+A pair whose shots are different sizes is compared over the overlap, and every
+row and column that exists in only one of them counts as changed.
+
+Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
+(new on the feature branch, renamed, retitled) has nothing to pair with and is
+skipped silently. On a branch-vs-branch run, compare the two runs' file lists
+before reading the numbers.
+
+## What makes a shot reproducible
+
+Most of it is in the preview, not in the script, so a Chromatic build in the
+cloud shoots the same page: `.storybook/preview-head.html` freezes the clock,
+and `settleForCapture` (the preview's `afterEach`, which runs after `play`)
+parks the animations and snaps the bottom-pinned lists. The script drives the
+rest:
+
+- **Storybook's own render phase is the readiness signal.** It waits for
+  `window.__STORYBOOK_PREVIEW__.storyRenders[].phase === 'finished'`, which is
+  reached only after the loaders, the decorators and the story's `play` are done.
+  A DOM check cannot see a `play` still running. (Storybook 10 spells the final
+  phase `finished`, not `completed`.)
+- **Network quiescence, not `networkidle`.** react-query retries and msw keep
+  requests going after load, and a few stories hang a request by design, so the
+  wait is "no request for 600ms", capped at 15s.
+- **The clock is frozen** (`2026-06-15T12:00:00Z`), by the preview itself. Chart windows, `4 mins ago`
+  labels and trial countdowns all derive from `now`; a live clock alone moved
+  8000 pixels on the dashboards list and redrew every chart axis.
+- **Animations are parked on their last frame** by `html.sb-still`, a
+  zero-length single iteration with `forwards` fill, plus `prefers-reduced-
+  motion`. The Motion toolbar item (`still` by default) turns it off. An infinite
+  spinner is otherwise caught at a random angle.
+- **`document.fonts.ready`**, because text reflows when a face lands late.
+- **Lists pinned to their bottom are snapped onto it**, once by the preview and
+  again by the script after the page goes quiet. A virtuoso list settles a
+  few pixels short of the end depending on the order its items were measured in.
+- **Two identical frames in a row**, because what a page is still waiting on is
+  often not observable from outside it.
+- **`[data-shot-ignore]`, `[data-chromatic="ignore"]` and `--ignore <selector>`**
+  hide a region that cannot be held still; Chromatic excludes the same attribute
+  from its comparison.
+- **The width is the only fixed dimension.** Chromatic's `viewports` are widths;
+  the height follows the page. `src/styles.scss` pins `html, body, #root` to
+  `height: 100%; overflow: hidden`, so the document never outgrows the viewport
+  and its height says nothing: what overflows are the shell's inner scrollers.
+  `--grow scrollers`, the default, grows the viewport until the tallest in-flow
+  scroller fits, so nothing is cut off and no scrollbar is left in the shot (the
+  dashboards list goes to 2226px in one round). Popups are skipped — they are out
+  of the flow, and a tall dropdown would otherwise drag the shot to a height
+  nothing on the page needs. A page that sizes a panel in `vh` grows its own
+  content as the viewport grows, so no height ever fits it and the rounds only
+  chase — `.alert-chart-container` is `57vh`, which puts Create Alert's fixed
+  point at 4344px with an empty band on top. Those pages are shot at `--height`
+  with their own scrollbar, which is what they look like in a browser, and the
+  log says `(viewport-sized content, stopped chasing Npx)`.
+
+With all of that, 29 of the 32 page tooltip stories are byte-identical across
+runs. The three that are not, and why:
+
+| Story | Residual | Cause |
+| --- | --- | --- |
+| `kubernetes-pods--tooltips-in-options-panel` | ~13k px | 24 tooltips held open in an overlapping cluster; they portal to `body` in mount order, and the drawer's own tooltips mount before or after the list's depending on when their data lands, so overlapping tooltips stack differently. Panel geometry itself is stable. |
+| `settings-role-editor--tooltips-in-json-editor` | ~2.5k px | monaco re-measures and lands one pixel off. |
+| `traces-trace-details--tooltips` | ~800 px | same class, one row of the waterfall. |
+
+Each is bimodal — two stable arrangements — so the same number reappears run
+after run. Diff a story against itself before believing its number, and reach
+for `--ignore` when a region cannot be settled.
+
+## Gotchas
+
+- **Zero pixels is a real answer.** A story whose tooltips are all short is
+  unaffected by a tooltip rule; it is not a broken capture.
+- **The selector matters more than the rule.** A global rule on
+  `[data-slot='…']` only reaches design-system components. antd's own tooltips
+  (`.ant-tooltip-inner`, e.g. the Create Alert help popups) are untouched, which
+  is why some stories show no diff at all.
+- **Global style overrides need `!important`.** `src/styles.scss` loads before
+  the design system injects its CSS-module styles at runtime, so a plain rule on
+  a `[data-slot='…']` element loses. A component-level `!important` of the same
+  specificity still wins over it — `PanelStatusPopover.module.scss` keeps its own
+  `max-width: 520px !important`.
+- **A fresh context per story** is why a full sweep takes ~6 min for 32 stories.
+  Reusing one page loses the msw service worker re-registration race and stories
+  start failing after a few navigations.
+- **Stories behind a hover, drawer or modal** only render what their `play`
+  reaches. If a state is missing from the shot, the story needs the `play`, not
+  the script.

.github/CODEOWNERS

@@ -296,3 +296,4 @@ go.mod @therealpandey
 /frontend/.storybook/ @H4ad
 /frontend/src/storybook/ @H4ad
 /.claude/skills/signoz-page-story/ @H4ad
+/.claude/skills/storybook-visual-diff/ @H4ad

.github/workflows/e2eci.yaml

@@ -40,7 +40,6 @@ jobs:
       matrix:
         project:
           - chromium
-        shard: [1, 2, 3, 4]
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
@@ -49,33 +48,12 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v4
-      # Images bring-up-stack would otherwise pull, at the tests/conftest.py
-      # defaults. A stale tag only loses the head start.
-      - name: pull-images
-        id: pull-images
-        background: true
-        run: |
-          printf '%s\n' \
-            node:22-bookworm \
-            golang:1.25-bookworm \
-            python:3.13-slim \
-            postgres:15 \
-            clickhouse/clickhouse-server:25.12.5 \
-            clickhouse/clickhouse-keeper:25.12.5 \
-            signoz/signoz-schema-migrator:v0.144.9 \
-            wiremock/wiremock:2.35.1-1 \
-            | xargs -P 0 -n 1 docker pull -q
       - name: python
         uses: actions/setup-python@v5
         with:
           python-version: 3.13
       - name: uv
         uses: astral-sh/setup-uv@v4
-      - name: python-install
-        id: python-install
-        background: true
-        run: |
-          cd tests && uv sync
       - name: node
         uses: actions/setup-node@v4
         with:
@@ -84,9 +62,19 @@ jobs:
         uses: pnpm/action-setup@v6
         with:
           version: 10
+      - name: python-install
+        run: |
+          cd tests && uv sync
       - name: pnpm-install
         run: |
           cd tests/e2e && pnpm install --frozen-lockfile
+      - name: playwright-browsers
+        run: |
+          docker create --name pw mcr.microsoft.com/playwright:v1.57.0-noble
+          docker cp pw:/ms-playwright "$RUNNER_TEMP/ms-playwright"
+          docker rm pw
+          echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
+          cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
       # Restore-only: the cacheci workflow owns cache saves. Seeds the
       # BuildKit cache mounts so the in-test image build is incremental.
       - name: restore
@@ -111,19 +99,6 @@ jobs:
               tar -xf /restored/pnpm-store.tar -C /pnpm/store
           EOF
           docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
-      - name: wait-stack-deps
-        wait: [pull-images, python-install]
-      # Started after the pulls so its download overlaps the CPU-bound
-      # image build instead of competing for the network.
-      - name: playwright-browsers
-        id: playwright-browsers
-        background: true
-        run: |
-          docker create --name pw mcr.microsoft.com/playwright:v1.57.0-noble
-          docker cp pw:/ms-playwright "$RUNNER_TEMP/ms-playwright"
-          docker rm pw
-          echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
-          cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
       - name: bring-up-stack
         run: |
           cd tests && \
@@ -131,12 +106,10 @@ jobs:
             --basetemp=./tmp/ \
             -vv --reuse --with-web \
             e2e/bootstrap/setup.py::test_setup
-      - name: wait-playwright-browsers
-        wait: playwright-browsers
       - name: playwright-test
         run: |
           cd tests/e2e && \
-            pnpm playwright test --project=${{ matrix.project }} --shard=${{ matrix.shard }}/4
+            pnpm playwright test --project=${{ matrix.project }}
       - name: teardown-stack
         if: always()
         run: |
@@ -149,6 +122,6 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-artifacts-${{ matrix.project }}-${{ matrix.shard }}
+          name: playwright-artifacts-${{ matrix.project }}
           path: tests/e2e/artifacts/
           retention-days: 5

.gitignore

@@ -231,7 +231,5 @@ pyrightconfig.json
 
 # dev
 .dev/
-.deepsec/
-.deepsec.zip
 .claude/worktrees/
 .claude/settings.local.json

docs/api/openapi.yml

@@ -37,7 +37,6 @@ components:
           opsgenie: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
           pagerduty: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
           slack: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-          telegram: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig'
           webhook: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
         propertyName: kind
       oneOf:
@@ -51,7 +50,6 @@ components:
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig'
       type: object
     AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig:
       properties:
@@ -161,18 +159,6 @@ components:
       - kind
       - spec
       type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig:
-      properties:
-        kind:
-          enum:
-          - telegram
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelTelegramConfig'
-      required:
-      - kind
-      - spec
-      type: object
     AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig:
       properties:
         kind:
@@ -325,7 +311,6 @@ components:
       - jira
       - jsmops
       - incidentio
-      - telegram
       type: string
     AlertmanagertypesChannelListOrder:
       enum:
@@ -530,29 +515,6 @@ components:
       - title
       - value
       type: object
-    AlertmanagertypesChannelTelegramConfig:
-      properties:
-        apiUrl:
-          type: string
-        botToken:
-          format: password
-          type: string
-        chatId:
-          format: int64
-          type: integer
-        disableNotifications:
-          type: boolean
-        message:
-          type: string
-        messageThreadId:
-          type: integer
-        sendResolved:
-          nullable: true
-          type: boolean
-      required:
-      - botToken
-      - chatId
-      type: object
     AlertmanagertypesChannelWebhookConfig:
       properties:
         bearerToken:
@@ -3463,6 +3425,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4205,6 +4174,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'
@@ -4220,6 +4190,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4233,6 +4204,7 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4318,6 +4290,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:
@@ -4397,6 +4381,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:
@@ -4570,6 +4564,87 @@ 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/DashboardtypesThresholdWithLabel'
+          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
     DashboardtypesSource:
       enum:
       - user

ee/query-service/rules/anomaly.go

@@ -277,7 +277,10 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		lb.Set(ruletypes.AlertRuleIDLabel, r.ID())
 		lb.Set(ruletypes.RuleSourceLabel, r.GeneratorURL())
 
-		annotations := r.ExpandAnnotations(expand)
+		annotations := make(ruletypes.Labels, 0, len(r.Annotations().Map()))
+		for name, value := range r.Annotations().Map() {
+			annotations = append(annotations, ruletypes.Label{Name: name, Value: expand(value)})
+		}
 		if smpl.IsMissing {
 			lb.Set(ruletypes.AlertNameLabel, "[No data] "+r.Name())
 			lb.Set(ruletypes.NoDataLabel, "true")

frontend/.gitignore

@@ -34,5 +34,5 @@ e2e/test-plan/user-preferences/
 /storybook-static/
 debug-storybook.log
 
-# Storybook screenshots (sbshot)
-/.sbshot/
+# Storybook screenshot sweeps (scripts/story-shots.mjs)
+/.story-shots/

frontend/.oxlintrc.json

@@ -338,10 +338,6 @@
             "name": "api/generated/services/dashboard",
             "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
             "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
-          },
-          {
-            "name": "motion/react-client",
-            "message": "[motion] motion/react-client is for React Server Components only. Use 'motion/react' instead — it provides the same exports and works correctly in client-side SPAs."
           }
         ]
       }
@@ -582,6 +578,17 @@
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"
       }
+    },
+    {
+      // Dev-tooling CLIs: stdout is their output, and they carry ported pixel/heap
+      // algorithms that read worse when split up.
+      "files": [
+        "scripts/**"
+      ],
+      "rules": {
+        "no-console": "off",
+        "sonarjs/cognitive-complexity": "off"
+      }
     }
   ]
 }

frontend/.storybook/modes.ts

@@ -1,7 +1,7 @@
 /**
  * Chromatic modes: one snapshot per entry, per story. The globals in a mode are
  * Storybook's own, so `theme` is the toolbar's theme and the story renders the
- * way it does locally. The width matches sbshot's default `--width`,
+ * way it does locally. The width matches `scripts/story-shots.mjs` (`--width`),
  * so a cloud snapshot and a local shot frame the same page.
  */
 export const allModes = {

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/scripts/story-shots-caption.mjs

@@ -0,0 +1,167 @@
+import { spawnSync } from 'node:child_process';
+
+/**
+ * The caption band both story-shots.mjs and story-shots-diff.mjs stamp on their
+ * output, and the ImageMagick plumbing under it. A shot records the band's
+ * height in `shots.json` so the diff can crop it back off before comparing:
+ * otherwise two runs whose captions differ would report the caption as a change.
+ */
+export const CONFIG_KEYS = [
+	'args',
+	'clock',
+	'width',
+	'height',
+	'grow',
+	'motion',
+	'settle',
+	'ignore',
+];
+
+let tools;
+
+const detect = () =>
+	(tools ??= {
+		seven: spawnSync('magick', ['-version']).status === 0,
+		six: spawnSync('convert', ['-version']).status === 0,
+	});
+
+export const hasMagick = () => {
+	const { seven, six } = detect();
+	return seven || six;
+};
+
+export const requireMagick = () => {
+	if (hasMagick()) {
+		return;
+	}
+	console.error(
+		'ImageMagick not found. Install it (brew install imagemagick, apt install imagemagick).',
+	);
+	process.exit(1);
+};
+
+export const magick = (args, input) => {
+	// ImageMagick 6 has no `magick`: its tools are separate binaries.
+	const [command, ...rest] = detect().seven
+		? ['magick', ...args]
+		: ['identify', 'montage'].includes(args[0])
+			? args
+			: ['convert', ...args];
+	const result = spawnSync(command, rest, {
+		input,
+		maxBuffer: 1024 * 1024 * 1024,
+	});
+	if (result.status !== 0) {
+		throw new Error(`${command} ${rest.join(' ')}: ${result.stderr}`);
+	}
+	return result.stdout;
+};
+
+/**
+ * ImageMagick's built-in default is a serif that reads as a book, not as a
+ * screenshot label, so the band asks for what is installed: a sans for the
+ * heading, a mono for the lines that carry ids, args and numbers. An
+ * unrecognised name is fatal to `convert`, hence the check against the list it
+ * reports; a machine with none of them keeps the default.
+ */
+const FONTS = {
+	heading: [
+		'Helvetica-Bold',
+		'DejaVu-Sans-Bold',
+		'Liberation-Sans-Bold',
+		'Arial-Bold',
+		'Noto-Sans-Bold',
+		'DejaVu-Sans',
+		'Liberation-Sans',
+	],
+	body: [
+		'Menlo',
+		'DejaVu-Sans-Mono',
+		'Liberation-Mono',
+		'JetBrainsMono-NF-Regular',
+		'Courier',
+	],
+};
+
+let installed;
+
+const fontArgs = (role) => {
+	installed ??= new Set(
+		[
+			...magick(['-list', 'font'])
+				.toString()
+				.matchAll(/^\s*Font:\s*(\S+)/gm),
+		].map(([, name]) => name),
+	);
+	const font = FONTS[role].find((name) => installed.has(name));
+	return font ? ['-font', font] : [];
+};
+
+/** Readable at fit-to-width, whatever the image is. */
+export const pointsize = (width) =>
+	Math.min(Math.max(Math.round(width / 45), 24), 140);
+
+// `label:` expands ImageMagick's own escapes and reads a file when the text
+// starts with @, so story names and arg values go through neither.
+export const bodyFont = () => fontArgs('body');
+
+export const literal = (text) => text.replaceAll('%', '%%').replace(/^@/, ' @');
+
+/** The gutter is the opposite of the theme, so the band keeps an edge. */
+export const palette = (theme) =>
+	theme === 'light'
+		? { background: '#101014', foreground: '#f4f4f5' }
+		: { background: '#f4f4f5', foreground: '#101014' };
+
+export const settingsLine = (config, keys = CONFIG_KEYS) =>
+	keys
+		.filter((key) => config?.[key])
+		.map((key) => `${key}:${config[key]}`)
+		.join('  ');
+
+const heightOf = (file) => Number(magick(['identify', '-format', '%h', file]));
+
+/**
+ * Writes `from` to `to` with `lines` above it, and returns how many rows that
+ * added — which is what a reader has to crop off to get the original back, so
+ * the band must never change the width. Each line is a `caption:` at the
+ * image's own width, wrapping instead of widening the canvas: a run whose
+ * caption is longer must still produce a shot the next run's shot pairs with.
+ * Type size follows the width, since a three-tile montage of 1680px shots is
+ * over 5000px wide and is read at fit-to-width.
+ */
+export const stamp = ({ lines, from, to, theme }) => {
+	const { background, foreground } = palette(theme);
+	const width = Number(magick(['identify', '-format', '%w', from]));
+	const heading = pointsize(width);
+	const before = heightOf(from);
+	const spacer = [
+		'-size',
+		`${width}x${Math.round(heading * 0.4)}`,
+		`xc:${background}`,
+	];
+
+	magick([
+		'-background',
+		background,
+		'-fill',
+		foreground,
+		'-gravity',
+		'center',
+		...spacer,
+		...lines.flatMap((line, index) => [
+			...fontArgs(index ? 'body' : 'heading'),
+			'-size',
+			`${width}x`,
+			'-pointsize',
+			String(index ? Math.round(heading * 0.62) : heading),
+			`caption:${literal(line)}`,
+		]),
+		...spacer,
+		from,
+		'-append',
+		to,
+	]);
+
+	return heightOf(to) - before;
+};

frontend/scripts/story-shots-diff.mjs

@@ -0,0 +1,460 @@
+#!/usr/bin/env node
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { parseArgs } from 'node:util';
+import path from 'node:path';
+import os from 'node:os';
+
+import {
+	bodyFont,
+	CONFIG_KEYS,
+	literal,
+	magick,
+	palette,
+	pointsize,
+	requireMagick,
+	settingsLine,
+	stamp,
+} from './story-shots-caption.mjs';
+
+/**
+ * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
+ * moved, per pair, largest first.
+ *
+ * The comparison is Chromatic's: a pixel counts as changed when its YIQ
+ * distance from the baseline pixel is over `threshold` of the largest distance
+ * two colours can have, and pixels that are only antialiasing around an
+ * otherwise identical edge do not count. `threshold` is their `diffThreshold`
+ * and its default is theirs too.
+ */
+const MAX_YIQ_DELTA = 35_215;
+
+const { values: opts, positionals } = parseArgs({
+	allowPositionals: true,
+	options: {
+		mode: { type: 'string', default: 'green' },
+		threshold: { type: 'string', default: '0.063' },
+		'include-aa': { type: 'boolean', default: false },
+		tint: { type: 'string', default: '' },
+		'no-caption': { type: 'boolean', default: false },
+		help: { type: 'boolean', short: 'h', default: false },
+	},
+});
+
+const [baseDir, afterDir, outArg] = positionals;
+const MODES = new Set(['green', 'green-parallel', 'red', 'red-parallel']);
+
+if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
+	console.log(`usage: node scripts/story-shots-diff.mjs <baseline-dir> <after-dir> [diff-dir]
+
+  --mode green           the after shot, changed pixels painted over it (default)
+  --mode green-parallel  previous | current | green diff, side by side and labelled
+  --mode red             the after shot faded out, changed pixels painted red
+  --mode red-parallel    previous | current | red diff, side by side and labelled
+  --threshold <0..1>     YIQ distance a pixel must move to count (default 0.063)
+  --include-aa           count antialiasing changes too (default: ignore them)
+  --tint <#rrggbb>       override the mode's highlight colour
+  --no-caption           do not stamp the story and the run settings on top
+
+Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
+	process.exit(opts.help ? 0 : 1);
+}
+
+const outDir = outArg ?? path.join(path.dirname(baseDir), 'diff');
+const threshold = Number(opts.threshold);
+const maxDelta = MAX_YIQ_DELTA * threshold * threshold;
+const highlight = hexToRgb(
+	opts.tint || (opts.mode.startsWith('green') ? '#00e05a' : '#ff003a'),
+);
+
+function hexToRgb(hex) {
+	const value = Number.parseInt(hex.replace('#', ''), 16);
+	return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+}
+
+requireMagick();
+
+/**
+ * `top` rows are dropped: story-shots.mjs stamps a caption on its shots and
+ * records how tall it is, and a caption is not part of what the two runs are
+ * being compared on.
+ */
+const readRgba = (file, top = 0) => {
+	const [width, height] = magick(['identify', '-format', '%w %h', file])
+		.toString()
+		.split(' ')
+		.map(Number);
+	const data = magick([file, '-depth', '8', 'RGBA:-']);
+	return top > 0 && top < height
+		? { width, height: height - top, data: data.subarray(top * width * 4) }
+		: { width, height, data };
+};
+
+const writeRgba = ({ width, height, data }, file) =>
+	writeFile(
+		file,
+		magick(
+			['-depth', '8', '-size', `${width}x${height}`, 'RGBA:-', 'png:-'],
+			data,
+		),
+	);
+
+/* The pixelmatch colour maths, which is what Chromatic's threshold is scaled to. */
+const y = (r, g, b) => r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
+const i = (r, g, b) => r * 0.59597799 - g * 0.2741761 - b * 0.32180189;
+const q = (r, g, b) => r * 0.21147017 - g * 0.52261711 + b * 0.31114694;
+
+/** Squared YIQ distance, signed by which pixel is brighter. */
+const colorDelta = (a, b, posA, posB, yOnly = false) => {
+	let r1 = a[posA];
+	let g1 = a[posA + 1];
+	let b1 = a[posA + 2];
+	const a1 = a[posA + 3];
+	let r2 = b[posB];
+	let g2 = b[posB + 1];
+	let b2 = b[posB + 2];
+	const a2 = b[posB + 3];
+
+	if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) {
+		return 0;
+	}
+
+	// Anything translucent is composited over the same mid grey in both images,
+	// so a difference in alpha alone still registers.
+	if (a1 < 255) {
+		const alpha = a1 / 255;
+		r1 = r1 * alpha + 255 * (1 - alpha) * 0.5;
+		g1 = g1 * alpha + 255 * (1 - alpha) * 0.5;
+		b1 = b1 * alpha + 255 * (1 - alpha) * 0.5;
+	}
+	if (a2 < 255) {
+		const alpha = a2 / 255;
+		r2 = r2 * alpha + 255 * (1 - alpha) * 0.5;
+		g2 = g2 * alpha + 255 * (1 - alpha) * 0.5;
+		b2 = b2 * alpha + 255 * (1 - alpha) * 0.5;
+	}
+
+	const deltaY = y(r1, g1, b1) - y(r2, g2, b2);
+	if (yOnly) {
+		return deltaY;
+	}
+
+	const deltaI = i(r1, g1, b1) - i(r2, g2, b2);
+	const deltaQ = q(r1, g1, b1) - q(r2, g2, b2);
+	return (
+		0.5053 * deltaY * deltaY + 0.299 * deltaI * deltaI + 0.1957 * deltaQ * deltaQ
+	);
+};
+
+/**
+ * True when the pixel sits on an edge that is drawn one subpixel over rather
+ * than moved: it is the darkest or lightest of its neighbours in one image, and
+ * the other image has a pixel around there doing the same job.
+ */
+const antialiased = (a, x1, y1, width, height, b) => {
+	const x0 = Math.max(x1 - 1, 0);
+	const y0 = Math.max(y1 - 1, 0);
+	const x2 = Math.min(x1 + 1, width - 1);
+	const y2 = Math.min(y1 + 1, height - 1);
+	const pos = (y1 * width + x1) * 4;
+	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+	let min = 0;
+	let max = 0;
+	let minX = 0;
+	let minY = 0;
+	let maxX = 0;
+	let maxY = 0;
+
+	for (let x = x0; x <= x2; x += 1) {
+		for (let yy = y0; yy <= y2; yy += 1) {
+			if (x === x1 && yy === y1) {
+				continue;
+			}
+
+			const delta = colorDelta(a, a, pos, (yy * width + x) * 4, true);
+			if (delta === 0) {
+				zeroes += 1;
+				if (zeroes > 2) {
+					return false;
+				}
+			} else if (delta < min) {
+				min = delta;
+				minX = x;
+				minY = yy;
+			} else if (delta > max) {
+				max = delta;
+				maxX = x;
+				maxY = yy;
+			}
+		}
+	}
+
+	if (min === 0 || max === 0) {
+		return false;
+	}
+
+	return (
+		(hasManySiblings(a, minX, minY, width, height) &&
+			hasManySiblings(b, minX, minY, width, height)) ||
+		(hasManySiblings(a, maxX, maxY, width, height) &&
+			hasManySiblings(b, maxX, maxY, width, height))
+	);
+};
+
+/** Whether the pixel has at least three identical neighbours. */
+const hasManySiblings = (img, x1, y1, width, height) => {
+	const x0 = Math.max(x1 - 1, 0);
+	const y0 = Math.max(y1 - 1, 0);
+	const x2 = Math.min(x1 + 1, width - 1);
+	const y2 = Math.min(y1 + 1, height - 1);
+	const pos = (y1 * width + x1) * 4;
+	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+
+	for (let x = x0; x <= x2; x += 1) {
+		for (let yy = y0; yy <= y2; yy += 1) {
+			if (x === x1 && yy === y1) {
+				continue;
+			}
+
+			const other = (yy * width + x) * 4;
+			if (
+				img[pos] === img[other] &&
+				img[pos + 1] === img[other + 1] &&
+				img[pos + 2] === img[other + 2] &&
+				img[pos + 3] === img[other + 3]
+			) {
+				zeroes += 1;
+				if (zeroes > 2) {
+					return true;
+				}
+			}
+		}
+	}
+
+	return false;
+};
+
+/**
+ * The changed pixels of the pair, painted over the after shot. The `red` modes
+ * fade the shot out first, the way a pixelmatch diff reads; the `green` ones
+ * leave it alone, the way Chromatic's does.
+ */
+const diffPair = (base, after, mode) => {
+	const width = Math.min(base.width, after.width);
+	const height = Math.min(base.height, after.height);
+	const out = Buffer.from(after.data);
+	const fade = !mode.startsWith('green');
+	let changed = 0;
+
+	if (fade) {
+		for (let pos = 0; pos < out.length; pos += 4) {
+			const grey = y(out[pos], out[pos + 1], out[pos + 2]);
+			const value = 255 + (grey - 255) * 0.1;
+			out[pos] = value;
+			out[pos + 1] = value;
+			out[pos + 2] = value;
+			out[pos + 3] = 255;
+		}
+	}
+
+	for (let row = 0; row < height; row += 1) {
+		for (let column = 0; column < width; column += 1) {
+			const basePos = (row * base.width + column) * 4;
+			const afterPos = (row * after.width + column) * 4;
+			const delta = colorDelta(base.data, after.data, basePos, afterPos);
+			if (Math.abs(delta) <= maxDelta) {
+				continue;
+			}
+			if (
+				!opts['include-aa'] &&
+				(antialiased(base.data, column, row, base.width, base.height, after.data) ||
+					antialiased(after.data, column, row, after.width, after.height, base.data))
+			) {
+				continue;
+			}
+
+			changed += 1;
+			out[afterPos] = highlight[0];
+			out[afterPos + 1] = highlight[1];
+			out[afterPos + 2] = highlight[2];
+			out[afterPos + 3] = 255;
+		}
+	}
+
+	// A shot that grew or shrank has no counterpart for the extra rows and
+	// columns, so all of them are a change.
+	const extra =
+		after.width * after.height -
+		width * height +
+		(base.width * base.height - width * height);
+
+	return {
+		data: out,
+		width: after.width,
+		height: after.height,
+		changed: changed + extra,
+	};
+};
+
+/**
+ * What each run was and how it was configured, from the `shots.json`
+ * story-shots.mjs leaves beside its output. A run shot before that existed, or
+ * a directory assembled by hand, simply gets no caption.
+ */
+const manifest = async (dir) => {
+	try {
+		return JSON.parse(await readFile(path.join(dir, 'shots.json'), 'utf8'));
+	} catch {
+		return null;
+	}
+};
+
+const [baseRun, afterRun] = await Promise.all([
+	manifest(baseDir),
+	manifest(afterDir),
+]);
+
+/** The settings the two runs disagree on: what a difference in the shots may be. */
+const changedKeys = CONFIG_KEYS.filter(
+	(key) => (baseRun?.config?.[key] ?? '') !== (afterRun?.config?.[key] ?? ''),
+);
+
+const settings = (run, keys) => settingsLine(run?.config, keys);
+
+const shotOf = (run, rel) =>
+	run?.shots?.find((shot) => shot.file === rel.split(path.sep).join('/'));
+
+const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;
+
+/** ImageMagick's inline crop, so a tile shows the shot without its caption. */
+const withoutCaption = (file, { width, height }, top) =>
+	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
+
+/** Story, then the settings both runs shared. One line each, widest font first. */
+const header = (rel) => {
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const shared = settings(
+		afterRun,
+		CONFIG_KEYS.filter((key) => !changedKeys.includes(key)),
+	);
+	return [
+		shot ? `${shot.title}/${shot.name}` : rel.replace(/\.png$/, ''),
+		[shot?.id ?? '', shot?.theme ?? '', shot?.status === 'busy' ? '(busy)' : '']
+			.filter(Boolean)
+			.join('  '),
+		shared,
+	].filter(Boolean);
+};
+
+/** A tile's own line: which side it is, and where its run differed. */
+const sideLabel = (side, run) =>
+	[side, settings(run, changedKeys)].filter(Boolean).join('   ');
+
+const captionLines = (rel, lines) =>
+	opts['no-caption'] ? [] : [...header(rel), ...lines].filter(Boolean);
+
+const pngs = async (dir, prefix = '') => {
+	const entries = await readdir(path.join(dir, prefix), { withFileTypes: true });
+	const files = [];
+	for (const entry of entries) {
+		const rel = path.join(prefix, entry.name);
+		if (entry.isDirectory()) {
+			files.push(...(await pngs(dir, rel)));
+		} else if (entry.name.endsWith('.png')) {
+			files.push(rel);
+		}
+	}
+	return files;
+};
+
+const results = [];
+await mkdir(outDir, { recursive: true });
+
+for (const rel of (await pngs(baseDir)).sort()) {
+	const afterFile = path.join(afterDir, rel);
+	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
+	let after;
+	try {
+		after = readRgba(afterFile, captionOf(afterRun, rel));
+	} catch {
+		console.error(`missing in after: ${rel}`);
+		continue;
+	}
+
+	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
+	const diff = diffPair(base, after, opts.mode);
+	const target = path.join(outDir, rel);
+	const parallel = opts.mode.endsWith('-parallel');
+	// With no tiles to label, a run's own settings go in the caption instead.
+	const caption = captionLines(
+		rel,
+		parallel || !changedKeys.length
+			? []
+			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
+	);
+	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
+	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);
+
+	// The gutter is the opposite of the theme's own background, so the tiles and
+	// the caption keep an edge instead of bleeding into it.
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const theme = shot?.theme ?? rel.split(path.sep)[0];
+	const { background, foreground } = palette(theme);
+
+	if (parallel) {
+		await writeRgba(diff, diffFile);
+		const tile = (label, file) => [
+			'(',
+			`label:${literal(label)}`,
+			file,
+			'-gravity',
+			'center',
+			'-append',
+			'-bordercolor',
+			background,
+			'-border',
+			'12',
+			')',
+		];
+		magick([
+			'-background',
+			background,
+			'-fill',
+			foreground,
+			...bodyFont(),
+			'-pointsize',
+			// The tiles end up side by side, so they are read at the montage's width.
+			String(Math.round(pointsize(after.width * 3) * 0.62)),
+			...tile(
+				sideLabel('previous', baseRun),
+				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
+			),
+			...tile(
+				sideLabel('current', afterRun),
+				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
+			),
+			...tile('diff', diffFile),
+			'-gravity',
+			'north',
+			'+append',
+			caption.length ? body : target,
+		]);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	} else {
+		await writeRgba(diff, caption.length ? body : target);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	}
+
+	results.push([diff.changed, rel]);
+}
+
+results
+	.sort((a, b) => b[0] - a[0])
+	.forEach(([changed, rel]) =>
+		console.log(`${String(changed).padStart(10)}  ${rel}`),
+	);
+
+console.error(`diffs in ${outDir}`);

frontend/scripts/story-shots.mjs

@@ -0,0 +1,514 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
+import { mkdir, rename, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { parseArgs } from 'node:util';
+import { pathToFileURL } from 'node:url';
+import path from 'node:path';
+import os from 'node:os';
+
+import {
+	CONFIG_KEYS,
+	hasMagick,
+	settingsLine,
+	stamp,
+} from './story-shots-caption.mjs';
+
+/**
+ * The wall clock every shot is taken at, passed to the preview as `storyClock`.
+ * `.storybook/preview-head.html` freezes the same instant by itself, so a
+ * Chromatic build reads the clock this run does.
+ */
+const FROZEN_CLOCK = '2026-06-15T12:00:00.000Z';
+
+const { values: opts, positionals } = parseArgs({
+	allowPositionals: true,
+	options: {
+		out: { type: 'string', short: 'o' },
+		stories: { type: 'string', multiple: true, default: [] },
+		title: { type: 'string', default: '' },
+		name: { type: 'string', default: '' },
+		theme: { type: 'string', multiple: true, default: [] },
+		args: { type: 'string', multiple: true, default: [] },
+		port: { type: 'string', default: process.env.SB_PORT ?? '6006' },
+		width: { type: 'string', default: '1680' },
+		height: { type: 'string', default: '1200' },
+		'max-height': { type: 'string', default: '8000' },
+		grow: { type: 'string', default: 'scrollers' },
+		settle: { type: 'string', default: '1500' },
+		clock: { type: 'string', default: FROZEN_CLOCK },
+		motion: { type: 'boolean', default: false },
+		ignore: { type: 'string', multiple: true, default: [] },
+		flat: { type: 'boolean', default: false },
+		'no-caption': { type: 'boolean', default: false },
+		list: { type: 'boolean', default: false },
+		help: { type: 'boolean', short: 'h', default: false },
+	},
+});
+
+const outDir = opts.out ?? positionals[0];
+const themes = opts.theme.flatMap((value) => value.split(',')).filter(Boolean);
+const storyArgs = opts.args.filter(Boolean).join(';');
+
+if (opts.help || (!outDir && !opts.list)) {
+	console.log(`usage: node scripts/story-shots.mjs <out-dir> [options]
+
+  --stories <match>   only stories whose id or title/name path contains <match>
+                      (repeatable, comma-separated; default: every story)
+  --title <prefix>    only stories whose title starts with <prefix>
+  --name <match>      only stories whose name contains <match>
+  --theme <themes>    themes to shoot, e.g. dark,light (default: story default)
+  --args <k:v;k2:v2>  arg overrides, storybook's own ?args= syntax (repeatable).
+                      A value containing a dot is dropped by storybook itself
+  --port <port>       storybook dev server port (default 6006, or $SB_PORT)
+  --width <px>        viewport width, the only fixed dimension (default 1680)
+  --height <px>       shortest the viewport may be (default 1200)
+  --max-height <px>   tallest the viewport may grow to (default 8000)
+  --grow <what>       scrollers (default) grows the viewport until the page's
+                      own scrollers fit, document only follows the document
+                      height (a no-op on any page with the app shell), none
+                      keeps --height
+  --settle <ms>       wait after the page goes quiet (default 1500)
+  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
+  --motion            keep animations and transitions running
+  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
+  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
+  --no-caption        do not stamp the story and the run settings on the shot
+  --list              print the matched stories and exit
+
+Screenshots land in <out-dir>/<theme>/<story-id>.png, alongside a shots.json
+recording what each shot is, how the run was configured, and how tall the
+caption on it is. story-shots-diff.mjs reads that to crop the caption off before
+comparing, so two runs never diff their own captions.
+
+Captioning needs ImageMagick; without it the shots are written bare.
+
+Playwright is looked up in tests/e2e, then in the global install; override with
+PLAYWRIGHT_MODULE. The browser is playwright's own chromium, else an installed
+Chrome; override with CHROME_PATH.`);
+	process.exit(opts.help ? 0 : 1);
+}
+
+const base = `http://localhost:${opts.port}`;
+
+// `index.json` carries raw control characters from story jsdoc, so it is read as
+// text rather than piped through anything that revalidates it.
+const index = JSON.parse(await (await fetch(`${base}/index.json`)).text());
+
+const matches = opts.stories
+	.flatMap((value) => value.split(','))
+	.filter(Boolean);
+
+const stories = Object.values(index.entries)
+	.filter((entry) => {
+		if (entry.type !== 'story') {
+			return false;
+		}
+		if (opts.title && !entry.title.startsWith(opts.title)) {
+			return false;
+		}
+		if (
+			opts.name &&
+			!entry.name.toLowerCase().includes(opts.name.toLowerCase())
+		) {
+			return false;
+		}
+		if (!matches.length) {
+			return true;
+		}
+
+		const haystack = `${entry.id} ${entry.title}/${entry.name}`.toLowerCase();
+		return matches.some((match) => haystack.includes(match.toLowerCase()));
+	})
+	.sort((a, b) => a.id.localeCompare(b.id));
+
+if (opts.list) {
+	stories.forEach((story) =>
+		console.log(`${story.id}\t${story.title}/${story.name}`),
+	);
+	console.log(`${stories.length} stories`);
+	process.exit(0);
+}
+
+if (!stories.length) {
+	console.error('no story matched');
+	process.exit(1);
+}
+
+const ignoreSelectors = opts.ignore
+	.flatMap((value) => value.split(','))
+	.map((value) => value.trim())
+	.filter(Boolean);
+
+if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
+	console.error(`--clock: not a date: ${opts.clock}`);
+	process.exit(1);
+}
+
+/**
+ * `[data-shot-ignore]` and `--ignore` hide what cannot be settled, the local
+ * half of Chromatic's `data-chromatic="ignore"`. Everything else the shot needs
+ * held still - the frozen clock, the parked animations, the lists snapped onto
+ * their bottom - is done by the preview itself, so a Chromatic build and a shot
+ * from here see the same page.
+ */
+const ignoreCss = (
+	ignore,
+) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
+	.map((selector) => `, ${selector}`)
+	.join('')} {
+	visibility: hidden !important;
+}`;
+
+/**
+ * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
+ * or wherever `$PLAYWRIGHT_MODULE` points. `@playwright/test` re-exports
+ * `chromium`, so an e2e install alone is enough.
+ */
+const resolvePlaywright = () => {
+	const specifiers = process.env.PLAYWRIGHT_MODULE
+		? [process.env.PLAYWRIGHT_MODULE]
+		: ['playwright', '@playwright/test'];
+
+	const find = (roots) => {
+		for (const specifier of specifiers) {
+			for (const root of roots) {
+				try {
+					return createRequire(path.join(root, '-')).resolve(specifier);
+				} catch {
+					/* next candidate */
+				}
+			}
+		}
+		return null;
+	};
+
+	const local = find([
+		import.meta.dirname,
+		path.resolve(import.meta.dirname, '../../tests/e2e'),
+	]);
+	if (local) {
+		return local;
+	}
+
+	// `npm root -g` prints the global node_modules; resolution starts a level up.
+	const globalRoot = spawnSync('npm', ['root', '-g'], { encoding: 'utf8' });
+	const global =
+		globalRoot.status === 0 && find([path.dirname(globalRoot.stdout.trim())]);
+	if (global) {
+		return global;
+	}
+
+	console.error(
+		'playwright not found. Install it (pnpm -C tests/e2e install, or npm i -g playwright) or set PLAYWRIGHT_MODULE.',
+	);
+	return process.exit(1);
+};
+
+const pwModule = await import(pathToFileURL(resolvePlaywright()).href);
+const pw = pwModule.chromium ? pwModule : pwModule.default;
+
+console.log(
+	`${stories.length} stories x ${themes.length || 1} theme(s) -> ${outDir}`,
+);
+
+/**
+ * A playwright install carries no browser of its own, and the revision it wants
+ * is often not the one that was downloaded, so an installed Chrome is the
+ * fallback before giving up.
+ */
+const launch = async () => {
+	if (process.env.CHROME_PATH) {
+		return pw.chromium.launch({ executablePath: process.env.CHROME_PATH });
+	}
+	try {
+		return await pw.chromium.launch();
+	} catch (error) {
+		try {
+			return await pw.chromium.launch({ channel: 'chrome' });
+		} catch {
+			console.error(
+				`${error.message.split('\n')[0]}\nRun 'playwright install chromium' or set CHROME_PATH to a browser binary.`,
+			);
+			return process.exit(1);
+		}
+	}
+};
+
+const browser = await launch();
+
+const failures = [];
+const shots = [];
+
+const runConfig = {
+	args: storyArgs,
+	clock: opts.clock,
+	width: opts.width,
+	height: opts.height,
+	grow: opts.grow,
+	motion: opts.motion ? 'live' : 'still',
+	settle: opts.settle,
+	ignore: ignoreSelectors.join(', '),
+};
+
+const captioning = !opts['no-caption'] && hasMagick();
+
+if (!opts['no-caption'] && !captioning) {
+	console.error('ImageMagick not found: shots are written without a caption.');
+}
+
+const configLine = settingsLine(runConfig, CONFIG_KEYS);
+
+for (const theme of themes.length ? themes : [null]) {
+	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
+	await mkdir(dir, { recursive: true });
+	if (theme) {
+		console.log(`\n[${theme}]`);
+	}
+
+	for (const story of stories) {
+		// A context per story: reusing one page loses the msw worker
+		// re-registration race after a few navigations and the story then dies on
+		// a missing worker.
+		const context = await browser.newContext({
+			viewport: { width: Number(opts.width), height: Number(opts.height) },
+			reducedMotion: opts.motion ? 'no-preference' : 'reduce',
+		});
+		const page = await context.newPage();
+
+		// react-query retries and msw both keep requests going long after load, so
+		// the settle waits on the page being quiet rather than on a fixed delay.
+		let inFlight = 0;
+		let lastActivity = Date.now();
+		page.on('request', () => {
+			inFlight += 1;
+			lastActivity = Date.now();
+		});
+		const done = () => {
+			inFlight = Math.max(inFlight - 1, 0);
+			lastActivity = Date.now();
+		};
+		page.on('requestfinished', done);
+		page.on('requestfailed', done);
+
+		// The height the rounds had reached when the page turned out to grow with
+		// the viewport, kept only to flag the story in the log.
+		let chasing = 0;
+
+		const url = new URL(`${base}/iframe.html`);
+		url.searchParams.set('viewMode', 'story');
+		url.searchParams.set('id', story.id);
+		// The preview owns the clock and the motion state, so both are asked for in
+		// the URL rather than injected here: a Chromatic build gets the defaults.
+		url.searchParams.set('storyClock', opts.clock);
+		const globals = [theme && `theme:${theme}`, opts.motion && 'motion:live']
+			.filter(Boolean)
+			.join(';');
+		if (globals) {
+			url.searchParams.set('globals', globals);
+		}
+		if (storyArgs) {
+			url.searchParams.set('args', storyArgs);
+		}
+
+		try {
+			await page.goto(url.href, { waitUntil: 'domcontentloaded' });
+
+			// Storybook's own render phase is the readiness signal: it reaches
+			// `finished` only once the loaders, the decorators and the story's `play`
+			// are all done, which a DOM check cannot see. The dev server transforms
+			// each page module on first visit, so this is the slow wait.
+			await page.waitForFunction(
+				() =>
+					(window.__STORYBOOK_PREVIEW__?.storyRenders ?? []).some((render) =>
+						['finished', 'errored', 'aborted'].includes(render.phase),
+					) || document.body.classList.contains('sb-show-errordisplay'),
+				undefined,
+				{ timeout: 120_000 },
+			);
+
+			await page.addStyleTag({ content: ignoreCss(ignoreSelectors) });
+			if (!opts.motion) {
+				// Videos and GIFs are parked on their first frame, as Chromatic does.
+				await page.evaluate(() =>
+					document.querySelectorAll('video').forEach((video) => video.pause?.()),
+				);
+			}
+
+			// Text reflows when a webfont lands, so the shot waits for the faces the
+			// page asked for. Some stories keep a request open by design, hence the
+			// cap on the quiet wait rather than a plain networkidle.
+			await page.evaluate(() => document.fonts.ready);
+			const quietUntil = Date.now() + 15_000;
+			while (
+				Date.now() < quietUntil &&
+				(inFlight > 0 || Date.now() - lastActivity < 600)
+			) {
+				await page.waitForTimeout(200);
+			}
+			await page.waitForTimeout(Number(opts.settle));
+
+			// The width is the fixed dimension and the height follows the page, the
+			// way a Chromatic viewport does. `src/styles.scss` pins
+			// `html, body, #root` to `height: 100%; overflow: hidden`, so the
+			// document can never outgrow the viewport and its height says nothing
+			// about what is on the page: what overflows are the shell's inner
+			// scrollers. `scrollers` grows the viewport until the tallest of those
+			// fits, so nothing is cut off and no scrollbar is left in the shot.
+			// Growing changes the layout, hence the rounds. A page that sizes a panel
+			// in `vh` grows its own content as the viewport grows, so no height ever
+			// fits it and the rounds only chase: `.alert-chart-container` is `57vh`,
+			// which puts Create Alert's fixed point at 4344px with an empty band on
+			// top. Such a page is shot at `--height` with its own scrollbar instead,
+			// which is what it looks like in a browser.
+			if (opts.grow !== 'none') {
+				const maximum = Number(opts['max-height']);
+				const requested = Number(opts.height);
+				let height = requested;
+				let fits = false;
+				for (let round = 0; round < 3 && !fits; round += 1) {
+					const needed = Math.min(
+						maximum,
+						await page.evaluate((withScrollers) => {
+							const document_ = Math.max(
+								document.documentElement.scrollHeight,
+								document.body.scrollHeight,
+							);
+							if (!withScrollers) {
+								return document_;
+							}
+
+							// Popups are skipped: they are out of the flow, and a tall
+							// dropdown or tooltip would otherwise drag the shot to a
+							// height nothing on the page itself needs.
+							const inFlow = (element) => {
+								for (
+									let node = element;
+									node && node !== document.documentElement;
+									node = node.parentElement
+								) {
+									const { position } = getComputedStyle(node);
+									if (position === 'fixed' || position === 'absolute') {
+										return false;
+									}
+								}
+								return true;
+							};
+
+							return [...document.querySelectorAll('*')].reduce((tallest, element) => {
+								const { overflowY } = getComputedStyle(element);
+								if (
+									!['auto', 'scroll', 'overlay'].includes(overflowY) ||
+									element.scrollHeight - element.clientHeight <= 1 ||
+									!inFlow(element)
+								) {
+									return tallest;
+								}
+
+								const box = element.getBoundingClientRect();
+								const above = box.top + window.scrollY;
+								const below = Math.max(0, document_ - (box.bottom + window.scrollY));
+								return Math.max(tallest, above + element.scrollHeight + below);
+							}, document_);
+						}, opts.grow === 'scrollers'),
+					);
+					fits = needed <= height;
+					if (fits) {
+						break;
+					}
+
+					height = Math.ceil(needed);
+					await page.setViewportSize({ width: Number(opts.width), height });
+					await page.waitForTimeout(Number(opts.settle));
+				}
+
+				if (!fits && height !== requested) {
+					chasing = height;
+					height = requested;
+					await page.setViewportSize({ width: Number(opts.width), height });
+					await page.waitForTimeout(Number(opts.settle));
+				}
+			}
+
+			// The preview snapped its bottom-pinned lists at `afterEach`, before the
+			// page went quiet; a virtuoso list is usually still measuring then.
+			await page.evaluate(() => window.__signozSnapPinnedScrollers?.());
+
+			// A page that is still moving — a list scrolling itself to the bottom, a
+			// monaco editor re-measuring, a tooltip being repositioned — is shot
+			// twice in a row until two frames come back identical, since what the
+			// page is waiting on is not observable from here.
+			let shot = await page.screenshot();
+			let stable = false;
+			for (let attempt = 0; attempt < 8 && !stable; attempt += 1) {
+				await page.waitForTimeout(400);
+				const next = await page.screenshot();
+				stable = next.equals(shot);
+				shot = next;
+			}
+
+			const file = path.join(dir, `${story.id}.png`);
+			await writeFile(file, shot);
+
+			// The band goes on the shot itself so a single screenshot says what it
+			// is, and its height is recorded so a diff can take it back off.
+			let caption = 0;
+			if (captioning) {
+				const temporary = path.join(
+					os.tmpdir(),
+					`story-shots-caption-${process.pid}.png`,
+				);
+				caption = stamp({
+					lines: [
+						`${story.title}/${story.name}`,
+						[story.id, theme ?? 'default', stable ? '' : '(busy)']
+							.filter(Boolean)
+							.join('  '),
+						configLine,
+					].filter(Boolean),
+					from: file,
+					to: temporary,
+					theme: theme ?? 'dark',
+				});
+				await rename(temporary, file);
+			}
+
+			shots.push({
+				file: path.posix.join(
+					opts.flat ? '' : (theme ?? 'default'),
+					`${story.id}.png`,
+				),
+				id: story.id,
+				title: story.title,
+				name: story.name,
+				theme: theme ?? 'default',
+				status: stable ? 'ok' : 'busy',
+				caption,
+			});
+			console.log(
+				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
+					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
+				}`,
+			);
+		} catch (error) {
+			failures.push(`${theme ?? 'default'}/${story.id}`);
+			console.log(`  FAIL ${story.id}: ${error.message.split('\n')[0]}`);
+		} finally {
+			await context.close();
+		}
+	}
+}
+
+await browser.close();
+
+// The diff script captions its output from this, so the run's own settings sit
+// next to the shots they produced rather than only in the shell history.
+await writeFile(
+	path.join(outDir, 'shots.json'),
+	`${JSON.stringify({ config: runConfig, shots }, null, '\t')}\n`,
+);
+
+if (failures.length) {
+	console.error(`\n${failures.length} failed: ${failures.join(', ')}`);
+	process.exit(1);
+}

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

@@ -4372,6 +4372,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -5372,6 +5378,101 @@ 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 interface DashboardtypesScatterPlotPanelSpecDTO {
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	formatting?: DashboardtypesTableFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5382,7 +5483,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6309,6 +6411,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';
@@ -278,6 +279,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/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -518,7 +518,10 @@ function QueryAddOns({
 								type="number"
 								onChange={handleChangeLimit}
 								initialValue={query?.limit ?? undefined}
-								placeholder="Enter limit"
+								placeholder={
+									resolvedFields.get(QueryBuilderField.Limit)?.placeholder ??
+									'Enter limit'
+								}
 								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
 								closeIcon={<ChevronUp size={16} />}
 							/>

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

@@ -43,7 +43,9 @@ function QueryAggregationOptions({
 
 		if (
 			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
+			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.SCATTER ||
+				panelType === PANEL_TYPES.PIE)
 		) {
 			return { hidden: true, disabled: false, reason: undefined };
 		}

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

@@ -95,6 +95,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		() =>
 			dataSource === DataSource.METRICS &&
 			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.SCATTER ||
 				panelType === PANEL_TYPES.PIE ||
 				panelType === PANEL_TYPES.VALUE),
 		[dataSource, panelType],

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

@@ -9,6 +9,7 @@ import {
 } from 'tests/test-utils';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
+import { QueryBuilderField } from '../queryBuilderFields.types';
 import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
 
 // Mocks: only what is required for this component to render and for us to assert handler calls
@@ -169,6 +170,33 @@ describe('QueryAddOns', () => {
 		expect(mockHandleChangeQueryData).toHaveBeenCalledWith('limit', 10);
 	});
 
+	it('shows the configured limit placeholder', () => {
+		render(
+			<QueryAddOns
+				query={baseQuery()}
+				version="v5"
+				isRawQuery={false}
+				showReduceTo={false}
+				panelType={PANEL_TYPES.SCATTER}
+				index={0}
+				fieldsConfig={{
+					[QueryBuilderField.Limit]: {
+						state: 'defaulted',
+						placeholder: 'Default 10,000',
+					},
+				}}
+				isForTraceOperator={false}
+			/>,
+		);
+
+		fireEvent.click(screen.getByTestId('query-add-on-limit'));
+
+		expect(screen.getByTestId('input-Limit')).toHaveAttribute(
+			'placeholder',
+			'Default 10,000',
+		);
+	});
+
 	it('auto-opens Order By and Limit when present in query', () => {
 		const query = baseQuery({
 			orderBy: [{ columnName: 'duration', order: 'desc' }],

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

@@ -0,0 +1,45 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { render, screen } from 'tests/test-utils';
+import type { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QueryAggregationOptions from '../QueryV2/QueryAggregation/QueryAggregation';
+
+jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+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', () => {
+	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/QueryBuilderV2/__tests__/queryBuilderFields.utils.test.ts

@@ -57,6 +57,19 @@ describe('resolveQueryBuilderField', () => {
 		expect(resolved.hidden).toBe(false);
 	});
 
+	it('keeps a defaulted field as is, carrying its placeholder', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
+			[QueryBuilderField.Limit]: { state: 'defaulted', placeholder: 'Default 10' },
+		});
+
+		expect(resolved).toStrictEqual({
+			hidden: false,
+			disabled: false,
+			pinned: false,
+			placeholder: 'Default 10',
+		});
+	});
+
 	it('only ever resolves one state at a time', () => {
 		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
 			[QueryBuilderField.Limit]: { state: 'disabled', reason: 'why' },

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -22,8 +22,12 @@ export enum QueryBuilderField {
 	AdditionalQueries = 'additional_queries',
 }
 
-/** `reason` is required on `disabled`: an inert control the user can see has to explain itself. */
+/**
+ * `reason` is required on `disabled`: an inert control the user can see has to explain itself.
+ * `defaulted` leaves the field as is; its placeholder names the value an empty field falls back to.
+ */
 export type QueryBuilderFieldRule =
+	| { state: 'defaulted'; placeholder: string }
 	| { state: 'hidden' }
 	| { state: 'disabled'; reason: string }
 	| { state: 'pinned' };

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -10,6 +10,7 @@ export interface ResolvedQueryBuilderField {
 	reason?: string;
 	/** Rendered open, not dismissable, and kept out of the add-on toggle bar. */
 	pinned: boolean;
+	placeholder?: string;
 }
 
 const AVAILABLE: ResolvedQueryBuilderField = {
@@ -20,6 +21,8 @@ const AVAILABLE: ResolvedQueryBuilderField = {
 
 function fromRule(rule: QueryBuilderFieldRule): ResolvedQueryBuilderField {
 	switch (rule.state) {
+		case 'defaulted':
+			return { ...AVAILABLE, placeholder: rule.placeholder };
 		case 'hidden':
 			return { hidden: true, disabled: false, pinned: false };
 		case 'disabled':

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -35,7 +35,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--spacing-2) 10.5px;
+		padding: 10.5px;
 		border-bottom: 1px solid var(--l1-border);
 
 		.left-actions {
@@ -46,9 +46,6 @@
 			justify-content: flex-start;
 
 			.text {
-				padding-left: var(--spacing-4);
-				white-space: nowrap;
-				flex-shrink: 0;
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
@@ -81,8 +78,6 @@
 			}
 
 			.select-box {
-				--combobox-trigger-width: auto;
-
 				display: flex;
 				padding: 2px 5px;
 				flex-direction: row;
@@ -100,9 +95,10 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: var(--spacing-1);
-			flex-shrink: 0;
+			gap: 10px;
+			width: 100%;
 			justify-content: flex-end;
+			--button-variant-link-color: var(--l1-foreground);
 
 			.divider-filter {
 				width: 1px;
@@ -110,8 +106,26 @@
 				background: var(--l1-background);
 			}
 
-			.active {
-				background: var(--l2-background);
+			.sync-icon {
+				cursor: pointer;
+			}
+
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--l1-background);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+
+				&.active,
+				&:hover {
+					background: var(--l2-background);
+				}
 			}
 		}
 	}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import {
 	ArrowUpToLine,
+	Filter,
 	Frown,
 	RefreshCw,
 	Settings2 as SettingsIcon,
@@ -13,9 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -180,6 +180,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
+			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -216,13 +217,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				</Combobox>
 			) : (
 				displayedQueryName && (
-					<TooltipSimple
+					<Tooltip
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
 						<Typography.Text className="sync-tag">
 							{displayedQueryName}
 						</Typography.Text>
-					</TooltipSimple>
+					</Tooltip>
 				)
 			)}
 		</section>
@@ -230,54 +231,51 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
-			<TooltipSimple title="Reset All">
+			<Tooltip title="Reset All">
 				<Button
-					variant="ghost"
+					variant="link"
 					color="secondary"
-					size="icon"
 					aria-label="Reset All"
+					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw size={14} />}
+					prefix={<RefreshCw className="sync-icon" size="md" />}
 				/>
-			</TooltipSimple>
+			</Tooltip>
 			{showFilterCollapse && (
-				<TooltipSimple title="Collapse Filters">
+				<Tooltip title="Collapse Filters">
 					<Button
-						variant="ghost"
+						variant="link"
 						color="secondary"
-						size="icon"
 						aria-label="Collapse Filters"
+						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size={14} />}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
 					/>
-				</TooltipSimple>
+				</Tooltip>
+			)}
+			{isDynamicFilters && (
+				<AuthZButton
+					checks={QuickFilterManagePermissions}
+					variant="link"
+					color="secondary"
+					aria-label="Settings"
+					className={classNames('right-action-icon-container', {
+						active: isSettingsOpen,
+					})}
+					onClick={(): void => setIsSettingsOpen(true)}
+					testId="settings-icon-container"
+					prefix={
+						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+							<SettingsIcon
+								className="settings-icon"
+								data-testid="settings-icon"
+								width={14}
+								height={14}
+							/>
+						</Tooltip>
+					}
+				/>
 			)}
-			{isDynamicFilters &&
-				(isSettingsDisabled ? (
-					<AuthZButton
-						checks={QuickFilterManagePermissions}
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						aria-label="Settings"
-						onClick={(): void => setIsSettingsOpen(true)}
-						testId="settings-icon-container"
-						prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-					/>
-				) : (
-					<TooltipSimple title="Settings">
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							aria-label="Settings"
-							className={classNames({ active: isSettingsOpen })}
-							onClick={(): void => setIsSettingsOpen(true)}
-							data-testid="settings-icon-container"
-							prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-						/>
-					</TooltipSimple>
-				))}
 		</section>
 	);
 

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
 import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
-import SavedViewsRestore from 'container/SavedViews/SavedViewsRestore';
 import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
@@ -41,7 +40,7 @@ function QuickFiltersLayout({
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
-	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const [isViewsOpen, setIsViewsOpen] = useState(false);
 	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const hasQuickFilters = !!quickFilterProps;
@@ -49,23 +48,19 @@ function QuickFiltersLayout({
 
 	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
 
-	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
-	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
+	const isPanelPinned = hasSavedViews && !hasQuickFilters;
 
-	const isSliding = hasQuickFilters && isViewsListOpen;
+	const isSliding = hasQuickFilters && isViewsOpen;
 
 	const savedViewsHeader = hasSavedViews ? (
 		<SavedViewsHeader
 			{...savedViewProps}
-			onOpenViews={
-				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
-			}
+			onOpenViews={isPanelPinned ? undefined : (): void => setIsViewsOpen(true)}
 		/>
 	) : undefined;
 
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{hasSavedViews && <SavedViewsRestore source={savedViewProps.source} />}
 			{showSidebar && (
 				<aside
 					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
@@ -85,12 +80,10 @@ function QuickFiltersLayout({
 						)}
 					</div>
 					<div className={styles.savedViews}>
-						{hasSavedViews && isViewsListVisible && (
+						{hasSavedViews && (isPanelPinned || isViewsOpen) && (
 							<SavedViewsPanel
 								{...savedViewProps}
-								onClose={
-									isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
-								}
+								onClose={isPanelPinned ? undefined : (): void => setIsViewsOpen(false)}
 							/>
 						)}
 					</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -23,13 +23,6 @@ jest.mock('hooks/useSavedViewEnabled', () => ({
 	useSavedViewEnabled: jest.fn(() => true),
 }));
 
-jest.mock('container/SavedViews/SavedViewsRestore', () => ({
-	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="saved-views-restore" data-source={source} />
-	),
-}));
-
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
 	default: ({
@@ -94,10 +87,6 @@ describe('QuickFiltersLayout', () => {
 		).not.toBeInTheDocument();
 		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
 		expect(screen.getByText('content')).toBeInTheDocument();
-		expect(screen.getByTestId('saved-views-restore')).toHaveAttribute(
-			'data-source',
-			SavedviewtypesSourceDTO.traces,
-		);
 	});
 
 	it('renders no sidebar at all without quick filters or saved views', () => {
@@ -160,7 +149,6 @@ describe('QuickFiltersLayout', () => {
 			expect(
 				screen.queryByTestId('quick-filters-layout-filters'),
 			).not.toBeInTheDocument();
-			expect(screen.queryByTestId('saved-views-restore')).not.toBeInTheDocument();
 		});
 
 		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
@@ -188,14 +176,12 @@ describe('QuickFiltersLayout', () => {
 			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
 			expect(drawer()).toHaveClass('isOpen');
 			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
-			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
 
 			await user.click(screen.getByTestId('saved-views-close'));
 
 			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
 			expect(drawer()).not.toHaveClass('isOpen');
 			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
-			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
 		});
 
 		it('hands the source to the header and the panel', async () => {

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/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -5,10 +5,12 @@ import {
 import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { SavedViewSourcePage } from 'container/SavedViews/types';
-import { findSavedView } from 'container/SavedViews/utils/findSavedView';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
-import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
+import {
+	findSavedView,
+	getSavedViewQuery,
+	SavedViewSourcePage,
+	toSavedViewSource,
+} from 'container/SavedViews/utils';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/Home/Home.tsx

@@ -32,7 +32,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { AnimatePresence, motion } from 'motion/react';
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-client';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { UserPreference } from 'types/api/preferences/preference';

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -8,7 +8,7 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
+import { getSavedViewQuery } from 'container/SavedViews/utils';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -41,7 +41,7 @@ import { buildCompositeKey, getOptionsFromKeys } from './utils';
 interface UseOptionsMenuProps {
 	storageKey?: string;
 	dataSource: DataSource;
-	aggregateOperator?: string;
+	aggregateOperator: string;
 	initialOptions?: InitialOptions;
 }
 

frontend/src/container/SavedViews/SaveChangesMenu.tsx

@@ -1,34 +0,0 @@
-import { useMemo } from 'react';
-import { Check } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import SavedViewsIconButton from './SavedViewsIconButton';
-import { SaveChangesMenuProps } from './types';
-
-function SaveChangesMenu({
-	disabled,
-	onSaveAsNew,
-	onUpdate,
-}: SaveChangesMenuProps): JSX.Element {
-	const items = useMemo<MenuItem[]>(
-		() => [
-			{ key: 'save-as-new', label: 'Save as new view', onClick: onSaveAsNew },
-			{ key: 'update', label: 'Update selected view', onClick: onUpdate },
-		],
-		[onSaveAsNew, onUpdate],
-	);
-
-	return (
-		<DropdownMenuSimple menu={{ items }} align="end">
-			<SavedViewsIconButton
-				title="Save changes"
-				icon={<Check size={14} />}
-				color="warning"
-				disabled={disabled}
-				testId="saved-views-save-changes"
-			/>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SaveChangesMenu;

frontend/src/container/SavedViews/SaveViewModal.module.scss

@@ -1,18 +0,0 @@
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-}
-
-.label {
-	font-size: var(--font-size-xs);
-	color: var(--l1-foreground);
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-4);
-	width: 100%;
-}

frontend/src/container/SavedViews/SaveViewModal.tsx

@@ -1,94 +0,0 @@
-import { FormEvent, useState } from 'react';
-import { Check, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-
-import { SAVE_VIEW_MODAL_TITLE } from './constants';
-import { SaveViewModalProps } from './types';
-
-import styles from './SaveViewModal.module.scss';
-
-const NAME_INPUT_ID = 'save-view-name';
-
-function SaveViewModal({
-	mode,
-	isSaving,
-	onClose,
-	onSave,
-}: SaveViewModalProps): JSX.Element {
-	const [name, setName] = useState('');
-	const displayName = name.trim();
-
-	const handleSave = async (): Promise<void> => {
-		if (!displayName || isSaving) {
-			return;
-		}
-		if (await onSave(displayName)) {
-			onClose();
-		}
-	};
-
-	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
-		event.preventDefault();
-		void handleSave();
-	};
-
-	return (
-		<DialogWrapper
-			open
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={SAVE_VIEW_MODAL_TITLE[mode]}
-			testId="save-view-modal"
-			footer={
-				<div className={styles.footer}>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						prefix={<X size={14} />}
-						onClick={onClose}
-						testId="save-view-cancel"
-					>
-						Cancel
-					</Button>
-					<Button
-						color="primary"
-						size="md"
-						prefix={<Check size={14} />}
-						loading={isSaving}
-						disabled={!displayName}
-						onClick={(): void => {
-							void handleSave();
-						}}
-						testId="save-view-submit"
-					>
-						Save view
-					</Button>
-				</div>
-			}
-		>
-			<form className={styles.field} onSubmit={handleSubmit}>
-				<label htmlFor={NAME_INPUT_ID}>
-					<Typography.Text className={styles.label}>Enter view name</Typography.Text>
-				</label>
-				<Input
-					id={NAME_INPUT_ID}
-					placeholder="Eg. payments-view"
-					value={name}
-					onChange={(event): void => setName(event.target.value)}
-					autoFocus
-					autoComplete="off"
-					testId="save-view-name"
-				/>
-			</form>
-		</DialogWrapper>
-	);
-}
-
-export default SaveViewModal;

frontend/src/container/SavedViews/SavedViewsHeader.module.scss

@@ -3,59 +3,17 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--spacing-2);
-	padding: var(--spacing-2) var(--spacing-5);
+	padding: var(--spacing-2) var(--spacing-3);
 	border-bottom: 1px solid var(--l1-border);
 	color: var(--l1-foreground);
 	flex-shrink: 0;
-
-	&.isDirty {
-		background: linear-gradient(
-			to right,
-			var(--callout-warning-background),
-			transparent
-		);
-	}
 }
 
 .name {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-3);
 	min-width: 0;
-	padding: var(--spacing-1) var(--spacing-4);
-	border-radius: var(--spacing-1);
-	background: var(--l3-background);
-	color: var(--l1-foreground);
-	font-size: var(--font-size-sm);
-
-	&.isDirty {
-		background: var(--callout-warning-background);
-		color: var(--callout-warning-title);
-	}
-}
-
-.nameText {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-}
-
-.dot {
-	width: var(--spacing-3);
-	height: var(--spacing-3);
-	flex-shrink: 0;
-	border-radius: 50%;
-	background: var(--callout-warning-icon);
-}
-
-.skeleton {
-	flex: 1;
-	min-width: 0;
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	gap: var(--spacing-1);
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
 }

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -1,140 +1,39 @@
-import { useCallback, useState } from 'react';
-import cx from 'classnames';
-import { Menu, Plus, Undo2, X } from '@signozhq/icons';
-import { Skeleton } from '@signozhq/ui/skeleton';
-import { toast } from '@signozhq/ui/sonner';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Menu } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 
-import { MY_VIEW_NAME, SAVED_VIEW_TOAST_POSITION } from './constants';
-import { useActiveSavedView } from './hooks/useActiveSavedView';
-import { useSavedViewActions } from './hooks/useSavedViewActions';
-import SaveChangesMenu from './SaveChangesMenu';
-import SavedViewsIconButton from './SavedViewsIconButton';
-import SaveViewModal from './SaveViewModal';
-import { SaveViewModalMode } from './types';
-
 import styles from './SavedViewsHeader.module.scss';
 
+// Temp Placeholder data till main functionality is plugged in
+const PLACEHOLDER_VIEW_NAME = 'My view';
+
 function SavedViewsHeader({
 	source,
 	onOpenViews,
 }: {
 	source: SavedviewtypesSourceDTO;
-	// Absent while the list is on screen.
+	// Absent when the list is always on screen.
 	onOpenViews?: () => void;
 }): JSX.Element {
-	const { view, isLoading, hasUnsavedChanges } = useActiveSavedView(source);
-	const { revertView, clearView, createView, updateView, isSaving } =
-		useSavedViewActions(source);
-
-	const [modalMode, setModalMode] = useState<SaveViewModalMode | null>(null);
-
-	const handleSave = useCallback(
-		async (displayName: string): Promise<boolean> => {
-			const id = await createView(displayName);
-			if (!id) {
-				return false;
-			}
-			toast.success('You have created a new view.', {
-				position: SAVED_VIEW_TOAST_POSITION,
-				...(onOpenViews && { action: { label: 'View', onClick: onOpenViews } }),
-			});
-			return true;
-		},
-		[createView, onOpenViews],
-	);
-
-	const handleUpdate = useCallback(async (): Promise<void> => {
-		if (view && (await updateView(view))) {
-			toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
-		}
-	}, [view, updateView]);
-
-	const openSaveAsNew = useCallback((): void => setModalMode('saveAsNew'), []);
-	const closeModal = useCallback((): void => setModalMode(null), []);
-
-	const name = view?.spec.displayName ?? MY_VIEW_NAME;
-	const isDirty = !!view && hasUnsavedChanges;
-
 	return (
 		<div
-			className={cx(styles.header, { [styles.isDirty]: isDirty })}
+			className={styles.header}
 			data-testid="saved-views-header"
 			data-source={source}
 		>
-			{isLoading ? (
-				<Skeleton.Input
-					active
-					size="small"
-					className={styles.skeleton}
-					testId="saved-views-loading"
-				/>
-			) : (
-				<TooltipSimple title={name}>
-					<span
-						className={cx(styles.name, { [styles.isDirty]: isDirty })}
-						data-testid="saved-views-name"
-					>
-						{isDirty && <span className={styles.dot} />}
-						<span className={styles.nameText}>{name}</span>
-					</span>
-				</TooltipSimple>
-			)}
-
-			<div className={styles.actions}>
-				{!view && (
-					<SavedViewsIconButton
-						title="Create new view"
-						icon={<Plus size={14} />}
-						disabled={isLoading}
-						onClick={(): void => setModalMode('create')}
-						testId="saved-views-create"
-					/>
-				)}
-				{view && !isDirty && (
-					<SavedViewsIconButton
-						title="Clear view"
-						icon={<Undo2 size={14} />}
-						onClick={clearView}
-						testId="saved-views-clear"
-					/>
-				)}
-				{view && isDirty && (
-					<>
-						<SaveChangesMenu
-							disabled={isSaving}
-							onSaveAsNew={openSaveAsNew}
-							onUpdate={(): void => {
-								void handleUpdate();
-							}}
-						/>
-						<SavedViewsIconButton
-							title="Discard changes"
-							icon={<X size={14} />}
-							color="warning"
-							disabled={isSaving}
-							onClick={(): void => revertView(view)}
-							testId="saved-views-discard"
-						/>
-					</>
-				)}
-				{!isDirty && onOpenViews && (
-					<SavedViewsIconButton
-						title="All views"
-						icon={<Menu size={14} />}
-						onClick={onOpenViews}
-						testId="saved-views-open"
-					/>
-				)}
-			</div>
-
-			{modalMode && (
-				<SaveViewModal
-					mode={modalMode}
-					isSaving={isSaving}
-					onClose={closeModal}
-					onSave={handleSave}
+			<Typography.Text className={styles.name}>
+				{PLACEHOLDER_VIEW_NAME}
+			</Typography.Text>
+			{onOpenViews && (
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label="All views"
+					prefix={<Menu size={14} />}
+					onClick={onOpenViews}
+					data-testid="saved-views-open"
 				/>
 			)}
 		</div>

frontend/src/container/SavedViews/SavedViewsIconButton.tsx

@@ -1,41 +0,0 @@
-import { forwardRef } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
-import { SavedViewsIconButtonProps } from './types';
-
-// forwardRef and rest props so a menu can use it as its trigger.
-const SavedViewsIconButton = forwardRef<
-	HTMLButtonElement,
-	SavedViewsIconButtonProps
->(function SavedViewsIconButton(
-	{
-		title,
-		icon,
-		testId,
-		color = 'secondary',
-		disabled,
-		onClick,
-		...triggerProps
-	},
-	ref,
-): JSX.Element {
-	return (
-		<TooltipSimple title={title}>
-			<Button
-				ref={ref}
-				variant="ghost"
-				color={color}
-				size="icon"
-				aria-label={title}
-				prefix={icon}
-				disabled={disabled}
-				onClick={onClick}
-				{...triggerProps}
-				data-testid={testId}
-			/>
-		</TooltipSimple>
-	);
-});
-
-export default SavedViewsIconButton;

frontend/src/container/SavedViews/SavedViewsRestore.tsx

@@ -1,17 +0,0 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { useRestoreLastUsedView } from './hooks/useRestoreLastUsedView';
-import { useSavedViewActions } from './hooks/useSavedViewActions';
-
-// Outside the sidebar, so a collapsed sidebar still restores on a bare explorer.
-function SavedViewsRestore({
-	source,
-}: {
-	source: SavedviewtypesSourceDTO;
-}): null {
-	const { selectView } = useSavedViewActions(source);
-	useRestoreLastUsedView({ source, selectView });
-	return null;
-}
-
-export default SavedViewsRestore;

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.save.test.tsx

@@ -1,211 +0,0 @@
-import { act, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { toast } from '@signozhq/ui/sonner';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SavedViewsHeader from '../SavedViewsHeader';
-import {
-	explorerUrl,
-	makeView,
-	mockSavedViewsApi,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-function renderHeader(
-	url: string,
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<SavedViewsHeader
-			source={SavedviewtypesSourceDTO.traces}
-			onOpenViews={jest.fn()}
-		/>,
-		url,
-	);
-}
-
-const modal = (): HTMLElement => screen.getByTestId('save-view-modal');
-const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
-
-async function openDirtyView(
-	view: ReturnType<typeof makeView>,
-): Promise<ReturnType<typeof renderWithExplorerProviders>> {
-	const rendered = renderHeader(viewUrl(PATH, view));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-			view.spec.displayName,
-		),
-	);
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-	act(() => {
-		rendered.history.push(
-			explorerUrl(PATH, {
-				query: queryWith(DataSource.TRACES, 'has_error = false'),
-				panelType: PANEL_TYPES.LIST,
-				viewKey: view.id,
-			}),
-		);
-	});
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-discard')).toBeInTheDocument(),
-	);
-	return rendered;
-}
-
-async function chooseFromSaveMenu(item: string): Promise<void> {
-	await userEvent.click(screen.getByTestId('saved-views-save-changes'));
-	await userEvent.click(await screen.findByRole('menuitem', { name: item }));
-}
-
-async function submitName(name: string): Promise<void> {
-	await userEvent.type(screen.getByTestId('save-view-name'), name);
-	await userEvent.click(screen.getByTestId('save-view-submit'));
-}
-
-describe('SavedViewsHeader saving', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	describe('create', () => {
-		it('saves the current state under a generated name and opens it', async () => {
-			const requests = mockSavedViewsApi([], { createdId: 'view-new' });
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-
-			expect(within(modal()).getByText('Create new view')).toBeInTheDocument();
-			expect(screen.getByTestId('save-view-submit')).toBeDisabled();
-
-			await submitName('Slow checkout');
-
-			await waitFor(() => expect(requests.created).toHaveLength(1));
-			expect(requests.created[0]).toStrictEqual(
-				expect.objectContaining({
-					generateName: true,
-					source: SavedviewtypesSourceDTO.traces,
-					schemaVersion: 'v2',
-					spec: expect.objectContaining({
-						displayName: 'Slow checkout',
-						panelType: 'list',
-					}),
-				}),
-			);
-			await waitFor(() =>
-				expect(urlParam(history, QueryParams.viewKey)).toBe(
-					JSON.stringify('view-new'),
-				),
-			);
-			expect(toast.success).toHaveBeenCalledWith(
-				'You have created a new view.',
-				expect.objectContaining({ position: 'top-right' }),
-			);
-			await waitFor(() => expect(isModalOpen()).toBe(false));
-			await waitFor(() =>
-				expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
-					'Slow checkout',
-				),
-			);
-		});
-
-		it('keeps the modal open and reports a failed save', async () => {
-			const requests = mockSavedViewsApi([], { createStatus: 500 });
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-			await submitName('Slow checkout');
-
-			await waitFor(() => expect(toast.error).toHaveBeenCalled());
-			expect(requests.created).toHaveLength(1);
-			expect(isModalOpen()).toBe(true);
-			expect(screen.getByTestId('save-view-name')).toHaveValue('Slow checkout');
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-			expect(toast.success).not.toHaveBeenCalled();
-		});
-
-		it('cancel closes the modal without saving', async () => {
-			const requests = mockSavedViewsApi([]);
-			renderHeader(explorerUrl(PATH, {}));
-
-			await userEvent.click(screen.getByTestId('saved-views-create'));
-			await userEvent.type(screen.getByTestId('save-view-name'), 'Draft');
-			await userEvent.click(screen.getByTestId('save-view-cancel'));
-
-			await waitFor(() => expect(isModalOpen()).toBe(false));
-			expect(requests.created).toHaveLength(0);
-		});
-	});
-
-	it('save as new creates another view from the changed state', async () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-		const requests = mockSavedViewsApi([errors], { createdId: 'view-copy' });
-		const { history } = await openDirtyView(errors);
-
-		await chooseFromSaveMenu('Save as new view');
-
-		expect(within(modal()).getByText('Save as new view')).toBeInTheDocument();
-		await submitName('Errors copy');
-
-		await waitFor(() => expect(requests.created).toHaveLength(1));
-		const body = requests.created[0] as {
-			spec: {
-				displayName: string;
-				queries: { spec: { filter: { expression: string } } }[];
-			};
-		};
-		expect(body.spec.displayName).toBe('Errors copy');
-		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
-		expect(requests.updated).toHaveLength(0);
-		await waitFor(() =>
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify('view-copy'),
-			),
-		);
-	});
-
-	it('update stores the changed state on the open view, keeping its name', async () => {
-		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-		const requests = mockSavedViewsApi([errors]);
-		await openDirtyView(errors);
-
-		await chooseFromSaveMenu('Update selected view');
-
-		await waitFor(() => expect(requests.updated).toHaveLength(1));
-		const { id, body } = requests.updated[0] as {
-			id: string;
-			body: {
-				source: string;
-				spec: {
-					displayName: string;
-					queries: { spec: { filter: { expression: string } } }[];
-				};
-			};
-		};
-		expect(id).toBe('view-1');
-		expect(body.source).toBe(SavedviewtypesSourceDTO.traces);
-		expect(body.spec.displayName).toBe('Errors');
-		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
-		await waitFor(() =>
-			expect(toast.success).toHaveBeenCalledWith(
-				'View updated',
-				expect.objectContaining({ position: 'top-right' }),
-			),
-		);
-		expect(requests.created).toHaveLength(0);
-	});
-});

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.test.tsx

@@ -1,327 +0,0 @@
-import { act, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { useActiveSavedView } from '../hooks/useActiveSavedView';
-import SavedViewsHeader from '../SavedViewsHeader';
-import SavedViewsRestore from '../SavedViewsRestore';
-import {
-	explorerUrl,
-	makeView,
-	mockSavedViewsApi,
-	queryWith,
-	renderWithExplorerProviders,
-	urlParam,
-	viewUrl,
-} from './savedViewsTestUtils';
-
-const PATH = ROUTES.TRACES_EXPLORER;
-
-const errors = makeView({ id: 'view-1', displayName: 'Errors' });
-const slow = makeView({
-	id: 'view-2',
-	displayName: 'Slow spans',
-	expression: 'duration_nano > 1000',
-	panelType: PANEL_TYPES.TIME_SERIES,
-});
-
-function renderHeader(
-	url: string,
-	onOpenViews: (() => void) | undefined = jest.fn(),
-): ReturnType<typeof renderWithExplorerProviders> {
-	return renderWithExplorerProviders(
-		<>
-			<SavedViewsRestore source={SavedviewtypesSourceDTO.traces} />
-			<SavedViewsHeader
-				source={SavedviewtypesSourceDTO.traces}
-				onOpenViews={onOpenViews}
-			/>
-			<RenderRecorder />
-		</>,
-		url,
-	);
-}
-
-const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
-const isDirty = (): boolean => !!screen.queryByTestId('saved-views-discard');
-const saveChanges = (): HTMLElement =>
-	screen.getByTestId('saved-views-save-changes');
-
-async function waitForView(name: string): Promise<void> {
-	await waitFor(() => expect(chip()).toHaveTextContent(name));
-	await waitFor(() =>
-		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
-	);
-}
-
-// Each render's answer from the hook the header reads, so a state that lasts a
-// single render is seen too.
-interface RenderRecord {
-	viewId?: string;
-	dirty: boolean;
-	// The staged query had not caught up with the url yet.
-	isStaging: boolean;
-}
-let renders: RenderRecord[] = [];
-function RenderRecorder(): null {
-	const { view, hasUnsavedChanges } = useActiveSavedView(
-		SavedviewtypesSourceDTO.traces,
-	);
-	const { stagedQuery } = useQueryBuilder();
-	const compositeQuery = useGetCompositeQueryParam();
-	renders.push({
-		viewId: view?.id,
-		dirty: hasUnsavedChanges,
-		isStaging: stagedQuery?.id !== compositeQuery?.id,
-	});
-	return null;
-}
-
-async function recordRenders(change: () => void): Promise<RenderRecord[]> {
-	renders = [];
-	act(change);
-	await waitFor(() =>
-		expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
-	);
-	await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
-	return renders;
-}
-
-describe('SavedViewsHeader', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	it('shows My view with create and all views when no view is open', async () => {
-		mockSavedViewsApi([errors]);
-		renderHeader(explorerUrl(PATH, {}));
-
-		expect(chip()).toHaveTextContent('My view');
-		expect(screen.getByTestId('saved-views-create')).toBeInTheDocument();
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.queryByTestId('saved-views-save-changes')).toBeNull();
-		expect(screen.queryByTestId('saved-views-discard')).toBeNull();
-	});
-
-	it('shows a skeleton while the view in the url loads', async () => {
-		mockSavedViewsApi([errors], { getDelay: 150 });
-		renderHeader(viewUrl(PATH, errors));
-
-		expect(screen.getByTestId('saved-views-loading')).toBeInTheDocument();
-		await waitForView('Errors');
-		expect(screen.queryByTestId('saved-views-loading')).toBeNull();
-	});
-
-	it('shows the open view clean, with clear and all views', async () => {
-		mockSavedViewsApi([errors]);
-		renderHeader(viewUrl(PATH, errors));
-
-		await waitForView('Errors');
-		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-create')).toBeNull();
-		expect(isDirty()).toBe(false);
-	});
-
-	it('falls back to My view when the view in the url does not load', async () => {
-		mockSavedViewsApi([]);
-		renderHeader(viewUrl(PATH, errors));
-
-		await waitFor(() =>
-			expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
-		);
-		expect(chip()).toHaveTextContent('My view');
-	});
-
-	it('marks the view dirty once the query changes, swapping in save and discard', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitForView('Errors');
-
-		act(() => {
-			history.push(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'has_error = false'),
-					panelType: PANEL_TYPES.LIST,
-					viewKey: errors.id,
-				}),
-			);
-		});
-
-		await waitFor(() => expect(isDirty()).toBe(true));
-		expect(saveChanges()).toBeInTheDocument();
-		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
-		expect(screen.queryByTestId('saved-views-open')).toBeNull();
-	});
-
-	it('marks the view dirty when only the tab changes', async () => {
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors));
-		await waitForView('Errors');
-
-		act(() => {
-			const params = new URLSearchParams(history.location.search);
-			params.set(QueryParams.panelTypes, JSON.stringify(PANEL_TYPES.TABLE));
-			history.push(`${PATH}?${params.toString()}`);
-		});
-
-		await waitFor(() => expect(isDirty()).toBe(true));
-	});
-
-	it('discard puts the saved query and tab back', async () => {
-		mockSavedViewsApi([slow]);
-		const { history } = renderHeader(viewUrl(PATH, slow));
-		await waitForView('Slow spans');
-
-		act(() => {
-			history.push(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'has_error = true'),
-					panelType: PANEL_TYPES.LIST,
-					viewKey: slow.id,
-				}),
-			);
-		});
-		await waitFor(() => expect(isDirty()).toBe(true));
-
-		await userEvent.click(screen.getByTestId('saved-views-discard'));
-
-		await waitFor(() => expect(isDirty()).toBe(false));
-		expect(urlParam(history, QueryParams.panelTypes)).toBe(
-			JSON.stringify(PANEL_TYPES.TIME_SERIES),
-		);
-		expect(urlParam(history, QueryParams.viewKey)).toBe(JSON.stringify(slow.id));
-		expect(urlParam(history, QueryParams.viewName)).toBeNull();
-		const query = JSON.parse(
-			decodeURIComponent(urlParam(history, QueryParams.compositeQuery) ?? ''),
-		);
-		expect(query.builder.queryData[0].filter.expression).toBe(
-			'duration_nano > 1000',
-		);
-	});
-
-	it('clear drops the view from the url but keeps the time range', async () => {
-		localStorage.setItem(
-			LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-			JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
-		);
-		mockSavedViewsApi([errors]);
-		const { history } = renderHeader(viewUrl(PATH, errors, '1h'));
-		await waitForView('Errors');
-
-		await userEvent.click(screen.getByTestId('saved-views-clear'));
-
-		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
-		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-		expect(urlParam(history, QueryParams.panelTypes)).toBeNull();
-		expect(urlParam(history, QueryParams.relativeTime)).toBe('1h');
-		expect(
-			JSON.parse(localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}'),
-		).toStrictEqual({});
-	});
-
-	describe('last used view', () => {
-		beforeEach(() => {
-			localStorage.setItem(
-				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-				JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
-			);
-		});
-
-		it('reopens on a bare explorer', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(explorerUrl(PATH, {}));
-
-			await waitForView('Errors');
-			expect(urlParam(history, QueryParams.viewKey)).toBe(
-				JSON.stringify(errors.id),
-			);
-		});
-
-		it('leaves a url with its own query alone', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(
-				explorerUrl(PATH, {
-					query: queryWith(DataSource.TRACES, 'service.name = "cart"'),
-				}),
-			);
-
-			await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
-			expect(chip()).toHaveTextContent('My view');
-			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
-		});
-	});
-
-	describe('unsaved changes indicator', () => {
-		it('never flashes while switching between views already loaded', async () => {
-			mockSavedViewsApi([errors, slow]);
-			const { history } = renderHeader(viewUrl(PATH, slow));
-			await waitForView('Slow spans');
-			act(() => history.push(viewUrl(PATH, errors)));
-			await waitForView('Errors');
-
-			const states = await recordRenders(() => history.push(viewUrl(PATH, slow)));
-
-			expect(chip()).toHaveTextContent('Slow spans');
-			expect(states.some((render) => render.isStaging)).toBe(true);
-			expect(states.filter((render) => render.dirty)).toStrictEqual([]);
-		});
-
-		it('holds while the query keeps changing on a dirty view', async () => {
-			mockSavedViewsApi([errors]);
-			const { history } = renderHeader(viewUrl(PATH, errors));
-			await waitForView('Errors');
-			act(() => {
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'has_error = false'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				);
-			});
-			await waitFor(() => expect(isDirty()).toBe(true));
-
-			const states = await recordRenders(() =>
-				history.push(
-					explorerUrl(PATH, {
-						query: queryWith(DataSource.TRACES, 'duration_nano > 5'),
-						panelType: PANEL_TYPES.LIST,
-						viewKey: errors.id,
-					}),
-				),
-			);
-
-			expect(states.some((render) => render.isStaging)).toBe(true);
-			expect(states.filter((render) => !render.dirty)).toStrictEqual([]);
-		});
-	});
-
-	it('on metrics compares no columns and has no all views button', async () => {
-		const cpu = makeView({
-			id: 'view-3',
-			displayName: 'CPU',
-			source: SavedviewtypesSourceDTO.metrics,
-			dataSource: DataSource.METRICS,
-			expression: '',
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-		mockSavedViewsApi([cpu]);
-		renderWithExplorerProviders(
-			<SavedViewsHeader source={SavedviewtypesSourceDTO.metrics} />,
-			viewUrl(ROUTES.METRICS_EXPLORER_EXPLORER, cpu),
-			DataSource.METRICS,
-		);
-
-		await waitForView('CPU');
-		expect(isDirty()).toBe(false);
-		expect(screen.queryByTestId('saved-views-open')).toBeNull();
-	});
-});

frontend/src/container/SavedViews/__tests__/savedViewsTestUtils.tsx

@@ -1,304 +0,0 @@
-import { ReactElement, useEffect, useMemo } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
-import { render, RenderResult } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { createMemoryHistory, MemoryHistory } from 'history';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { NuqsAdapter } from 'nuqs/adapters/react';
-import { AppContext } from 'providers/App/App';
-import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import store from 'store';
-import { getAppContextMock } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { __setSearchParamsGetterForTest } from 'utils/getUnstableCurrentSearchParams';
-
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { toSavedViewSpec } from '../utils/toSavedViewSpec';
-
-export const API = 'http://localhost/api/v2/saved_views';
-
-// The server stores queries through typed structs: nulls, empty strings,
-// zeros and empty lists do not come back.
-function asStoredByServer(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		return Object.fromEntries(
-			Object.entries(value)
-				.map(([key, v]) => [key, asStoredByServer(v)] as const)
-				.filter(([, v]) => v !== undefined),
-		);
-	}
-	return value === null || value === '' || value === 0 ? undefined : value;
-}
-
-export function queryWith(dataSource: DataSource, expression: string): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression },
-					aggregations: [{ expression: 'count()' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-export function makeView({
-	id,
-	displayName,
-	source = SavedviewtypesSourceDTO.traces,
-	dataSource = DataSource.TRACES,
-	expression = 'has_error = true',
-	panelType = PANEL_TYPES.LIST,
-}: {
-	id: string;
-	displayName: string;
-	source?: SavedviewtypesSourceDTO;
-	dataSource?: DataSource;
-	expression?: string;
-	panelType?: PANEL_TYPES;
-}): SavedviewtypesSavedViewDTO {
-	const spec = toSavedViewSpec({
-		query: queryWith(dataSource, expression),
-		panelType,
-		displayName,
-	});
-	return {
-		id,
-		name: `${displayName.toLowerCase()}-abc`,
-		source,
-		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
-		createdBy: 'test@signoz.io',
-		updatedBy: 'test@signoz.io',
-		spec: {
-			...spec,
-			queries: asStoredByServer(
-				JSON.parse(JSON.stringify(spec.queries)),
-			) as SavedviewtypesSavedViewSpecDTO['queries'],
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-// Params written the way the query builder redirect writes them.
-export function explorerUrl(
-	path: string,
-	{
-		query,
-		panelType,
-		viewKey,
-		relativeTime = '15m',
-	}: {
-		query?: Query;
-		panelType?: PANEL_TYPES;
-		viewKey?: string;
-		relativeTime?: string;
-	},
-): string {
-	const params = new URLSearchParams();
-	if (query) {
-		params.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify({ ...query, id: `url-${Math.random()}` })),
-		);
-	}
-	if (panelType) {
-		params.set(QueryParams.panelTypes, JSON.stringify(panelType));
-	}
-	if (viewKey) {
-		params.set(QueryParams.viewKey, JSON.stringify(viewKey));
-	}
-	params.set(QueryParams.relativeTime, relativeTime);
-	return `${path}?${params.toString()}`;
-}
-
-export function viewUrl(
-	path: string,
-	view: SavedviewtypesSavedViewDTO,
-	relativeTime?: string,
-): string {
-	return explorerUrl(path, {
-		query: getSavedViewQuery(view),
-		panelType: view.spec.panelType as unknown as PANEL_TYPES,
-		viewKey: view.id,
-		relativeTime,
-	});
-}
-
-export interface Requests {
-	created: unknown[];
-	updated: { id: string; body: unknown }[];
-}
-
-export function mockSavedViewsApi(
-	views: SavedviewtypesSavedViewDTO[],
-	{
-		createStatus = 201,
-		createdId = 'view-new',
-		getDelay = 0,
-	}: { createStatus?: number; createdId?: string; getDelay?: number } = {},
-): Requests {
-	const requests: Requests = { created: [], updated: [] };
-	server.use(
-		rest.get(API, (req, res, ctx) => {
-			const source = req.url.searchParams.get('source');
-			return res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: views.filter((view) => !source || view.source === source),
-				}),
-			);
-		}),
-		rest.get(`${API}/:id`, (req, res, ctx) => {
-			const view = views.find((v) => v.id === req.params.id);
-			if (!view) {
-				return res(ctx.status(404), ctx.json({ status: 'error' }));
-			}
-			return res(
-				ctx.delay(getDelay),
-				ctx.status(200),
-				ctx.json({ status: 'success', data: view }),
-			);
-		}),
-		rest.post(API, async (req, res, ctx) => {
-			const body = await req.json();
-			requests.created.push(body);
-			if (createStatus >= 400) {
-				return res(
-					ctx.status(createStatus),
-					ctx.json({
-						status: 'error',
-						error: { code: 'internal', message: 'boom' },
-					}),
-				);
-			}
-			views.push({ ...body, id: createdId } as SavedviewtypesSavedViewDTO);
-			return res(
-				ctx.status(createStatus),
-				ctx.json({ status: 'success', data: { id: createdId } }),
-			);
-		}),
-		rest.put(`${API}/:id`, async (req, res, ctx) => {
-			const body = await req.json();
-			requests.updated.push({ id: String(req.params.id), body });
-			return res(ctx.status(204));
-		}),
-	);
-	return requests;
-}
-
-const mockStore = configureStore([thunk]);
-
-// What the explorer page does around the header: writes its default query to a
-// bare url, and sets the provider's tab from the url (the provider alone seeds
-// it from the raw, still JSON-quoted param).
-function ExplorerShell({ dataSource }: { dataSource: DataSource }): null {
-	const panelType = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-	const { handleSetConfig, updateAllQueriesOperators } = useQueryBuilder();
-	const defaultQuery = useMemo(
-		() =>
-			updateAllQueriesOperators(
-				initialQueriesMap[dataSource],
-				PANEL_TYPES.LIST,
-				dataSource,
-			),
-		[updateAllQueriesOperators, dataSource],
-	);
-	useShareBuilderUrl({ defaultValue: defaultQuery });
-	useEffect(() => {
-		handleSetConfig(panelType, dataSource);
-	}, [panelType, dataSource, handleSetConfig]);
-	return null;
-}
-
-export function renderWithExplorerProviders(
-	ui: ReactElement,
-	initialUrl: string,
-	dataSource: DataSource = DataSource.TRACES,
-): RenderResult & { history: MemoryHistory } {
-	const history = createMemoryHistory({ initialEntries: [initialUrl] });
-	// Parts of the explorer read window.location directly, so it follows the
-	// router's history.
-	const syncWindowLocation = (): void =>
-		window.history.replaceState(
-			null,
-			'',
-			`${history.location.pathname}${history.location.search}`,
-		);
-	syncWindowLocation();
-	history.listen(syncWindowLocation);
-	__setSearchParamsGetterForTest(
-		() => new URLSearchParams(history.location.search),
-	);
-	safeNavigateMock.mockImplementation((to) => {
-		history.push(
-			typeof to === 'string'
-				? to
-				: `${to.pathname ?? history.location.pathname}${to.search ?? ''}`,
-		);
-	});
-
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { refetchOnWindowFocus: false, retry: false },
-			mutations: { retry: false },
-		},
-	});
-
-	const result = render(
-		<Router history={history}>
-			<CompatRouter>
-				<NuqsAdapter>
-					<QueryClientProvider client={queryClient}>
-						<Provider store={mockStore(store.getState())}>
-							<AppContext.Provider value={getAppContextMock('ADMIN')}>
-								<TooltipProvider>
-									<PreferenceContextProvider>
-										<QueryBuilderProvider>
-											<ExplorerShell dataSource={dataSource} />
-											{ui}
-										</QueryBuilderProvider>
-									</PreferenceContextProvider>
-								</TooltipProvider>
-							</AppContext.Provider>
-						</Provider>
-					</QueryClientProvider>
-				</NuqsAdapter>
-			</CompatRouter>
-		</Router>,
-	);
-	return { ...result, history };
-}
-
-export function urlParam(history: MemoryHistory, key: string): string | null {
-	return new URLSearchParams(history.location.search).get(key);
-}

frontend/src/container/SavedViews/__tests__/utils.test.ts

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { getSavedViewQuery } from '../getSavedViewQuery';
+import { findSavedView, getSavedViewQuery, toSavedViewSource } from '../utils';
 
 jest.mock('uuid', () => ({
 	v4: (): string => 'test-id',
@@ -91,3 +91,36 @@ describe('getSavedViewQuery', () => {
 		expect(query).not.toHaveProperty('panelType', PANEL_TYPES.TIME_SERIES);
 	});
 });
+
+describe('toSavedViewSource', () => {
+	it('maps every explorer source page to the v2 source', () => {
+		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
+		expect(toSavedViewSource(DataSource.TRACES)).toBe(
+			SavedviewtypesSourceDTO.traces,
+		);
+		expect(toSavedViewSource(DataSource.METRICS)).toBe(
+			SavedviewtypesSourceDTO.metrics,
+		);
+		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
+	});
+});
+
+describe('findSavedView', () => {
+	const views = [
+		{ ...makeView(), id: 'a' },
+		{ ...makeView(), id: 'b' },
+	];
+
+	it('returns the view with the matching id', () => {
+		expect(findSavedView(views, 'b')?.id).toBe('b');
+	});
+
+	it('returns undefined when the id is not in the list', () => {
+		expect(findSavedView(views, 'c')).toBeUndefined();
+	});
+
+	it('returns undefined for a null or not yet loaded list', () => {
+		expect(findSavedView(null, 'a')).toBeUndefined();
+		expect(findSavedView(undefined, 'a')).toBeUndefined();
+	});
+});

frontend/src/container/SavedViews/constants.ts

@@ -1,35 +0,0 @@
-import {
-	SavedviewtypesSchemaVersionDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SaveViewModalMode } from './types';
-
-export const SAVED_VIEW_SCHEMA_VERSION = SavedviewtypesSchemaVersionDTO.v2;
-
-// Only the logs and traces explorers have columns and formatting to save.
-export const SAVED_VIEW_OPTIONS_DATA_SOURCE: Partial<
-	Record<SavedviewtypesSourceDTO, DataSource>
-> = {
-	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
-	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
-};
-
-// What selecting a view writes to the url, so clearing it removes exactly these.
-export const SAVED_VIEW_URL_PARAMS = [
-	QueryParams.viewKey,
-	QueryParams.viewName,
-	QueryParams.compositeQuery,
-	QueryParams.panelTypes,
-];
-
-export const MY_VIEW_NAME = 'My view';
-
-export const SAVE_VIEW_MODAL_TITLE: Record<SaveViewModalMode, string> = {
-	create: 'Create new view',
-	saveAsNew: 'Save as new view',
-};
-
-export const SAVED_VIEW_TOAST_POSITION = 'top-right' as const;

frontend/src/container/SavedViews/hooks/useActiveSavedView.ts

@@ -1,76 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useGetSavedView } from 'api/generated/services/saved-view';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SAVED_VIEW_OPTIONS_DATA_SOURCE } from '../constants';
-import { UseActiveSavedViewResult } from '../types';
-import { hasUnsavedViewChanges } from '../utils/hasUnsavedViewChanges';
-
-export function useActiveSavedView(
-	source: SavedviewtypesSourceDTO,
-): UseActiveSavedViewResult {
-	const { viewKey } = useGetSavedViewParams();
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
-	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
-	});
-
-	const { data, isLoading, isError } = useGetSavedView(
-		{ id: viewKey },
-		{ query: { enabled: !!viewKey } },
-	);
-	const view = viewKey ? data?.data : undefined;
-
-	// The query builder stages the url query a render later. Until the ids
-	// match, keep the last answer for this view; another view starts clean.
-	const compositeQuery = useGetCompositeQueryParam();
-	const isStagedQueryCurrent =
-		!!stagedQuery && stagedQuery.id === compositeQuery?.id;
-	const lastResult = useRef<{ viewId?: string; hasUnsavedChanges: boolean }>({
-		hasUnsavedChanges: false,
-	});
-
-	const hasUnsavedChanges = useMemo((): boolean => {
-		if (!view) {
-			return false;
-		}
-		if (!isStagedQueryCurrent) {
-			return (
-				lastResult.current.viewId === view.id &&
-				lastResult.current.hasUnsavedChanges
-			);
-		}
-		return hasUnsavedViewChanges({
-			view,
-			stagedQuery,
-			panelType: panelType ?? PANEL_TYPES.LIST,
-			options: optionsDataSource ? options : undefined,
-		});
-	}, [
-		view,
-		isStagedQueryCurrent,
-		stagedQuery,
-		panelType,
-		optionsDataSource,
-		options,
-	]);
-
-	useEffect(() => {
-		lastResult.current = { viewId: view?.id, hasUnsavedChanges };
-	}, [view?.id, hasUnsavedChanges]);
-
-	return {
-		view,
-		isLoading: !!viewKey && isLoading,
-		isError: !!viewKey && isError,
-		hasUnsavedChanges,
-	};
-}

frontend/src/container/SavedViews/hooks/useLastUsedView.ts

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import {
-	PreservedViewsInLocalStorage,
-	PreservedViewType,
-} from 'container/ExplorerOptions/types';
-
-import { UseLastUsedViewResult } from '../types';
-
-function readLastUsedViews(): PreservedViewsInLocalStorage {
-	try {
-		return JSON.parse(
-			getLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) || '{}',
-		) as PreservedViewsInLocalStorage;
-	} catch {
-		return {};
-	}
-}
-
-// Read at call time, not held in state: the hook is used from more than one
-// place and a cached copy would bring back a view another caller just cleared.
-export function useLastUsedView(
-	savedViewSource: SavedviewtypesSourceDTO,
-): UseLastUsedViewResult {
-	// The bar's enum carries the same four values as the v2 source.
-	const source = savedViewSource as unknown as PreservedViewType;
-
-	const getLastUsedViewKey = useCallback(
-		(): string | undefined => readLastUsedViews()[source]?.key,
-		[source],
-	);
-
-	const setLastUsedView = useCallback(
-		(id: string, displayName: string): void => {
-			setLocalStorageKey(
-				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
-				JSON.stringify({
-					...readLastUsedViews(),
-					[source]: { key: id, value: displayName },
-				}),
-			);
-		},
-		[source],
-	);
-
-	const clearLastUsedView = useCallback((): void => {
-		const { [source]: _removed, ...rest } = readLastUsedViews();
-		setLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS, JSON.stringify(rest));
-	}, [source]);
-
-	return { getLastUsedViewKey, setLastUsedView, clearLastUsedView };
-}

frontend/src/container/SavedViews/hooks/useRestoreLastUsedView.ts

@@ -1,56 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useGetSavedView } from 'api/generated/services/saved-view';
-import { QueryParams } from 'constants/query';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
-
-import { UseRestoreLastUsedViewArgs } from '../types';
-import { useLastUsedView } from './useLastUsedView';
-
-export function useRestoreLastUsedView({
-	source,
-	selectView,
-}: UseRestoreLastUsedViewArgs): void {
-	const { viewKey } = useGetSavedViewParams();
-	const { getLastUsedViewKey, clearLastUsedView } = useLastUsedView(source);
-
-	// Decided on the first render, before the explorer writes its default query
-	// to the url; later an empty url means the view was cleared.
-	const [lastUsedViewKey] = useState(() => {
-		const params = getUnstableCurrentSearchParams();
-		const isBare =
-			!params.get(QueryParams.viewKey) && !params.get(QueryParams.compositeQuery);
-		return isBare ? getLastUsedViewKey() : undefined;
-	});
-	const hasRestored = useRef(false);
-
-	const shouldRestore = !!lastUsedViewKey && !viewKey && !hasRestored.current;
-
-	const { data, isError } = useGetSavedView(
-		{ id: lastUsedViewKey ?? '' },
-		{ query: { enabled: shouldRestore } },
-	);
-	const view = data?.data;
-
-	useEffect(() => {
-		if (!shouldRestore) {
-			return undefined;
-		}
-		if (isError) {
-			hasRestored.current = true;
-			clearLastUsedView();
-			return undefined;
-		}
-		if (!view) {
-			return undefined;
-		}
-
-		// Deferred like the bar's restore, so it lands after the explorer has
-		// written its default query to the url.
-		const timeoutId = setTimeout(() => {
-			hasRestored.current = true;
-			selectView(view);
-		}, 0);
-		return (): void => clearTimeout(timeoutId);
-	}, [shouldRestore, isError, view, clearLastUsedView, selectView]);
-}

frontend/src/container/SavedViews/hooks/useSavedViewActions.ts

@@ -1,193 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	invalidateGetSavedView,
-	invalidateListSavedViews,
-	useCreateSavedView,
-	useUpdateSavedView,
-} from 'api/generated/services/saved-view';
-import {
-	RenderErrorResponseDTO,
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { DataSource } from 'types/common/queryBuilder';
-import { toAPIError } from 'utils/errorUtils';
-import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
-
-import {
-	SAVED_VIEW_OPTIONS_DATA_SOURCE,
-	SAVED_VIEW_SCHEMA_VERSION,
-	SAVED_VIEW_TOAST_POSITION,
-	SAVED_VIEW_URL_PARAMS,
-} from '../constants';
-import { UseSavedViewActionsResult } from '../types';
-import { getSavedViewQuery } from '../utils/getSavedViewQuery';
-import { toSavedViewSpec } from '../utils/toSavedViewSpec';
-import { useLastUsedView } from './useLastUsedView';
-
-// Columns and formatting need no handling here: with a viewKey in the url the
-// preference provider reads them from the view, and without one it falls back
-// to the user's own.
-export function useSavedViewActions(
-	source: SavedviewtypesSourceDTO,
-): UseSavedViewActionsResult {
-	const queryClient = useQueryClient();
-	const { pathname } = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-	const { currentQuery, stagedQuery, panelType, redirectWithQueryBuilderData } =
-		useQueryBuilder();
-	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { setLastUsedView, clearLastUsedView } = useLastUsedView(source);
-
-	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
-	const { options } = useOptionsMenu({
-		dataSource: optionsDataSource ?? DataSource.LOGS,
-	});
-
-	const { mutateAsync: createSavedView, isLoading: isCreating } =
-		useCreateSavedView();
-	const { mutateAsync: updateSavedView, isLoading: isUpdating } =
-		useUpdateSavedView();
-
-	const invalidateViews = useCallback(
-		async (id?: string): Promise<void> => {
-			await Promise.all([
-				invalidateListSavedViews(queryClient),
-				id ? invalidateGetSavedView(queryClient, { id }) : undefined,
-				// The saved views bar still lists through v1.
-				queryClient.invalidateQueries([{ sourcepage: source }]),
-			]);
-		},
-		[queryClient, source],
-	);
-
-	const toCurrentSpec = useCallback(
-		(displayName: string, color?: string): SavedviewtypesSavedViewSpecDTO =>
-			toSavedViewSpec({
-				query: stagedQuery ?? currentQuery,
-				panelType: panelType ?? PANEL_TYPES.LIST,
-				displayName,
-				options: optionsDataSource ? options : undefined,
-				color,
-			}),
-		[stagedQuery, currentQuery, panelType, optionsDataSource, options],
-	);
-
-	const selectView = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			handleExplorerTabChange(view.spec.panelType, {
-				query: getSavedViewQuery(view),
-				viewKey: view.id,
-			});
-			setLastUsedView(view.id, view.spec.displayName);
-		},
-		[handleExplorerTabChange, setLastUsedView],
-	);
-
-	// The preference provider re-reads a view's columns only when its list
-	// changes, so the list is refetched as the view is applied again.
-	const revertView = useCallback(
-		(view: SavedviewtypesSavedViewDTO): void => {
-			void invalidateListSavedViews(queryClient);
-			selectView(view);
-		},
-		[queryClient, selectView],
-	);
-
-	// The query builder redirects only ever add params, so the url is rebuilt
-	// here; the time range and everything else a view does not set stays.
-	const clearView = useCallback((): void => {
-		clearLastUsedView();
-
-		const params = getUnstableCurrentSearchParams();
-		SAVED_VIEW_URL_PARAMS.forEach((param) => params.delete(param));
-		safeNavigate(`${pathname}?${params.toString()}`);
-	}, [clearLastUsedView, pathname, safeNavigate]);
-
-	const createView = useCallback(
-		async (displayName: string): Promise<string | undefined> => {
-			try {
-				const { data } = await createSavedView({
-					data: {
-						generateName: true,
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: toCurrentSpec(displayName),
-					},
-				});
-				await invalidateViews();
-				redirectWithQueryBuilderData(stagedQuery ?? currentQuery, {
-					[QueryParams.viewKey]: data.id,
-				});
-				setLastUsedView(data.id, displayName);
-				return data.id;
-			} catch (error) {
-				toast.error(
-					toAPIError(
-						error as ErrorType<RenderErrorResponseDTO>,
-						'Could not save the view',
-					).getErrorMessage(),
-					{ position: SAVED_VIEW_TOAST_POSITION },
-				);
-				return undefined;
-			}
-		},
-		[
-			createSavedView,
-			source,
-			toCurrentSpec,
-			invalidateViews,
-			redirectWithQueryBuilderData,
-			stagedQuery,
-			currentQuery,
-			setLastUsedView,
-		],
-	);
-
-	const updateView = useCallback(
-		async (view: SavedviewtypesSavedViewDTO): Promise<boolean> => {
-			try {
-				await updateSavedView({
-					pathParams: { id: view.id },
-					data: {
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: toCurrentSpec(view.spec.displayName, view.spec.display?.color),
-					},
-				});
-				await invalidateViews(view.id);
-				return true;
-			} catch (error) {
-				toast.error(
-					toAPIError(
-						error as ErrorType<RenderErrorResponseDTO>,
-						'Could not update the view',
-					).getErrorMessage(),
-					{ position: SAVED_VIEW_TOAST_POSITION },
-				);
-				return false;
-			}
-		},
-		[updateSavedView, source, toCurrentSpec, invalidateViews],
-	);
-
-	return {
-		selectView,
-		revertView,
-		clearView,
-		createView,
-		updateView,
-		isSaving: isCreating || isUpdating,
-	};
-}

frontend/src/container/SavedViews/types.ts

@@ -1,83 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export type SavedViewSourcePage = DataSource | 'meter';
-
-export type SavedViewOptions = Pick<
-	OptionsQuery,
-	'selectColumns' | 'format' | 'maxLines' | 'fontSize'
->;
-
-export interface ToSavedViewSpecArgs {
-	query: Query;
-	panelType: PANEL_TYPES;
-	displayName: string;
-	options?: SavedViewOptions;
-	color?: string;
-}
-
-export interface HasUnsavedViewChangesArgs {
-	view: SavedviewtypesSavedViewDTO;
-	stagedQuery: Query | null;
-	panelType: PANEL_TYPES;
-	options?: SavedViewOptions;
-}
-
-export interface UseLastUsedViewResult {
-	getLastUsedViewKey: () => string | undefined;
-	setLastUsedView: (id: string, displayName: string) => void;
-	clearLastUsedView: () => void;
-}
-
-export interface UseActiveSavedViewResult {
-	view: SavedviewtypesSavedViewDTO | undefined;
-	isLoading: boolean;
-	isError: boolean;
-	hasUnsavedChanges: boolean;
-}
-
-export interface UseSavedViewActionsResult {
-	selectView: (view: SavedviewtypesSavedViewDTO) => void;
-	revertView: (view: SavedviewtypesSavedViewDTO) => void;
-	clearView: () => void;
-	createView: (displayName: string) => Promise<string | undefined>;
-	updateView: (view: SavedviewtypesSavedViewDTO) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-export interface UseRestoreLastUsedViewArgs {
-	source: SavedviewtypesSourceDTO;
-	selectView: UseSavedViewActionsResult['selectView'];
-}
-
-export type SaveViewModalMode = 'create' | 'saveAsNew';
-
-export interface SaveViewModalProps {
-	mode: SaveViewModalMode;
-	isSaving: boolean;
-	onClose: () => void;
-	// Resolves true when saved; the modal stays open otherwise.
-	onSave: (displayName: string) => Promise<boolean>;
-}
-
-export interface SaveChangesMenuProps {
-	disabled: boolean;
-	onSaveAsNew: () => void;
-	onUpdate: () => void;
-}
-
-export interface SavedViewsIconButtonProps {
-	title: string;
-	icon: ReactElement;
-	testId: string;
-	color?: 'secondary' | 'warning';
-	disabled?: boolean;
-	onClick?: () => void;
-}

frontend/src/container/SavedViews/utils.ts

@@ -0,0 +1,49 @@
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryEnvelope } from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type SavedViewSourcePage = DataSource | 'meter';
+
+// Explorers and the preferences module are keyed by DataSource (the signal),
+// the api keys views by source page. Same values today, so this is the one
+// place they meet. AI observability views will come with their own source and
+// DataSource cannot tell them apart from traces, so preferences should move to
+// source page at that point and this map goes with it.
+const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
+	{
+		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,
+		[DataSource.TRACES]: SavedviewtypesSourceDTO.traces,
+		[DataSource.METRICS]: SavedviewtypesSourceDTO.metrics,
+		meter: SavedviewtypesSourceDTO.meter,
+	};
+
+export function toSavedViewSource(
+	sourcePage: SavedViewSourcePage,
+): SavedviewtypesSourceDTO {
+	return SAVED_VIEW_SOURCE[sourcePage];
+}
+
+// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
+export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
+	const { queries, panelType } = view.spec;
+	return mapQueryDataFromApi({
+		queries: queries as QueryEnvelope[],
+		panelType: panelType as unknown as PANEL_TYPES,
+		queryType: EQueryType.QUERY_BUILDER,
+		unit: undefined,
+	});
+}
+
+export function findSavedView(
+	views: SavedviewtypesSavedViewDTO[] | null | undefined,
+	id: string,
+): SavedviewtypesSavedViewDTO | undefined {
+	return views?.find((view) => view.id === id);
+}

frontend/src/container/SavedViews/utils/__tests__/findSavedView.test.ts

@@ -1,20 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { findSavedView } from '../findSavedView';
-
-describe('findSavedView', () => {
-	const views = [{ id: 'a' }, { id: 'b' }] as SavedviewtypesSavedViewDTO[];
-
-	it('returns the view with the matching id', () => {
-		expect(findSavedView(views, 'b')?.id).toBe('b');
-	});
-
-	it('returns undefined when the id is not in the list', () => {
-		expect(findSavedView(views, 'c')).toBeUndefined();
-	});
-
-	it('returns undefined for a null or not yet loaded list', () => {
-		expect(findSavedView(null, 'a')).toBeUndefined();
-		expect(findSavedView(undefined, 'a')).toBeUndefined();
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/hasUnsavedViewChanges.test.ts

@@ -1,217 +0,0 @@
-import {
-	SavedviewtypesSavedViewDTO,
-	SavedviewtypesSavedViewSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	initialQueriesMap,
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { getSavedViewQuery } from '../getSavedViewQuery';
-import { hasUnsavedViewChanges } from '../hasUnsavedViewChanges';
-import { toSavedViewSpec } from '../toSavedViewSpec';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function query(dataSource: DataSource, expression = 'has_error = true'): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression },
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-// The server stores the queries through typed structs: nulls, empty strings,
-// zeros and empty lists do not come back.
-function asStoredByServer(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		const entries = Object.entries(value)
-			.map(([key, v]) => [key, asStoredByServer(v)] as const)
-			.filter(([, v]) => v !== undefined);
-		return Object.fromEntries(entries);
-	}
-	return value === null || value === '' || value === 0 ? undefined : value;
-}
-
-function viewFrom(
-	spec: SavedviewtypesSavedViewSpecDTO,
-): SavedviewtypesSavedViewDTO {
-	return {
-		id: 'view-1',
-		spec: {
-			...spec,
-			queries: asStoredByServer(
-				JSON.parse(JSON.stringify(spec.queries)),
-			) as SavedviewtypesSavedViewSpecDTO['queries'],
-		},
-	} as SavedviewtypesSavedViewDTO;
-}
-
-// What the query builder stages after the view is opened: the stored query,
-// with its defaults filled in.
-function stagedFrom(
-	view: SavedviewtypesSavedViewDTO,
-	dataSource: DataSource,
-): Query {
-	const saved = getSavedViewQuery(view);
-	return {
-		...saved,
-		builder: {
-			...saved.builder,
-			queryData: saved.builder.queryData.map((queryData) => ({
-				...initialQueryBuilderFormValuesMap[dataSource],
-				...queryData,
-			})),
-		},
-	};
-}
-
-const columns = [
-	{ name: 'service.name', key: 'service.name' },
-	{ name: 'name', key: 'name' },
-] as TelemetryFieldKey[];
-
-const formatting = {
-	format: 'raw' as LogViewMode,
-	maxLines: 2,
-	fontSize: FontSize.SMALL,
-};
-
-describe('hasUnsavedViewChanges', () => {
-	const options = { selectColumns: columns, ...formatting };
-	const view = viewFrom(
-		toSavedViewSpec({
-			query: query(DataSource.TRACES),
-			panelType: PANEL_TYPES.LIST,
-			displayName: 'Errors',
-			options,
-		}),
-	);
-	const staged = stagedFrom(view, DataSource.TRACES);
-
-	it('is dirty when the columns change', () => {
-		expect(
-			hasUnsavedViewChanges({
-				view,
-				stagedQuery: staged,
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, selectColumns: [columns[0]] },
-			}),
-		).toBe(true);
-	});
-
-	it('reads a traces view without columns as the default columns', () => {
-		const bare = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.TRACES),
-				panelType: PANEL_TYPES.LIST,
-				displayName: 'Errors',
-			}),
-		);
-
-		expect(
-			hasUnsavedViewChanges({
-				view: bare,
-				stagedQuery: stagedFrom(bare, DataSource.TRACES),
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, selectColumns: defaultTraceSelectedColumns },
-			}),
-		).toBe(false);
-	});
-
-	describe('on logs', () => {
-		const logsView = viewFrom(
-			toSavedViewSpec({
-				query: query(DataSource.LOGS),
-				panelType: PANEL_TYPES.LIST,
-				displayName: 'Errors',
-				options: { selectColumns: columns, ...formatting },
-			}),
-		);
-		const logsStaged = stagedFrom(logsView, DataSource.LOGS);
-		// The explorer always adds the required logs columns.
-		const shownColumns = ensureLogsRequiredColumns(columns);
-
-		it('is clean with the required columns the explorer adds', () => {
-			expect(
-				hasUnsavedViewChanges({
-					view: logsView,
-					stagedQuery: logsStaged,
-					panelType: PANEL_TYPES.LIST,
-					options: { selectColumns: shownColumns, ...formatting },
-				}),
-			).toBe(false);
-		});
-
-		it('is dirty when the formatting changes', () => {
-			expect(
-				hasUnsavedViewChanges({
-					view: logsView,
-					stagedQuery: logsStaged,
-					panelType: PANEL_TYPES.LIST,
-					options: { selectColumns: shownColumns, ...formatting, maxLines: 5 },
-				}),
-			).toBe(true);
-		});
-
-		it('reads a view without formatting as the default formatting', () => {
-			const bare = viewFrom(
-				toSavedViewSpec({
-					query: query(DataSource.LOGS),
-					panelType: PANEL_TYPES.LIST,
-					displayName: 'Errors',
-				}),
-			);
-
-			expect(
-				hasUnsavedViewChanges({
-					view: bare,
-					stagedQuery: stagedFrom(bare, DataSource.LOGS),
-					panelType: PANEL_TYPES.LIST,
-					options: {
-						selectColumns: defaultLogsSelectedColumns,
-						format: 'table',
-						maxLines: 1,
-						fontSize: FontSize.SMALL,
-					},
-				}),
-			).toBe(false);
-		});
-	});
-
-	it('ignores formatting on traces', () => {
-		expect(
-			hasUnsavedViewChanges({
-				view,
-				stagedQuery: staged,
-				panelType: PANEL_TYPES.LIST,
-				options: { ...options, ...formatting, maxLines: 5 },
-			}),
-		).toBe(false);
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/toSavedViewSource.test.ts

@@ -1,17 +0,0 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { toSavedViewSource } from '../toSavedViewSource';
-
-describe('toSavedViewSource', () => {
-	it('maps every explorer source page to the v2 source', () => {
-		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
-		expect(toSavedViewSource(DataSource.TRACES)).toBe(
-			SavedviewtypesSourceDTO.traces,
-		);
-		expect(toSavedViewSource(DataSource.METRICS)).toBe(
-			SavedviewtypesSourceDTO.metrics,
-		);
-		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
-	});
-});

frontend/src/container/SavedViews/utils/__tests__/toSavedViewSpec.test.ts

@@ -1,95 +0,0 @@
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	SavedviewtypesPanelTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-
-import { toSavedViewPanelType, toSavedViewSpec } from '../toSavedViewSpec';
-
-jest.mock('uuid', () => ({
-	v4: (): string => 'test-id',
-}));
-
-function tracesQuery(): Query {
-	const base = initialQueriesMap.traces;
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					filter: { expression: 'has_error = true' },
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-const columns = [
-	{
-		name: 'service.name',
-		key: 'service.name',
-		signal: 'traces',
-		fieldContext: 'resource',
-		fieldDataType: 'string',
-		isIndexed: true,
-	},
-	{ key: 'name' },
-] as unknown as TelemetryFieldKey[];
-
-describe('toSavedViewPanelType', () => {
-	it('folds a dashboard only panel type to graph', () => {
-		expect(toSavedViewPanelType(PANEL_TYPES.PIE)).toBe(
-			SavedviewtypesPanelTypeDTO.graph,
-		);
-	});
-});
-
-describe('toSavedViewSpec', () => {
-	it('stores only the field identity of the columns, naming key only ones', () => {
-		const spec = toSavedViewSpec({
-			query: tracesQuery(),
-			panelType: PANEL_TYPES.LIST,
-			displayName: 'Errors',
-			options: {
-				selectColumns: columns,
-				format: 'raw' as LogViewMode,
-				maxLines: 2,
-				fontSize: FontSize.SMALL,
-			},
-		});
-
-		expect(spec.selectedFields).toStrictEqual([
-			{
-				name: 'service.name',
-				signal: 'traces',
-				fieldContext: 'resource',
-				fieldDataType: 'string',
-			},
-			{ name: 'name' },
-		]);
-		expect(spec.display).toStrictEqual({
-			format: 'raw',
-			maxLines: 2,
-			fontSize: FontSize.SMALL,
-		});
-	});
-
-	it('keeps the colour in display', () => {
-		const spec = toSavedViewSpec({
-			query: tracesQuery(),
-			panelType: PANEL_TYPES.TIME_SERIES,
-			displayName: 'Errors',
-			color: 'red',
-		});
-
-		expect(spec.panelType).toBe(SavedviewtypesPanelTypeDTO.graph);
-		expect(spec.requestType).toBe(Querybuildertypesv5RequestTypeDTO.time_series);
-		expect(spec.display).toStrictEqual({ color: 'red' });
-	});
-});

frontend/src/container/SavedViews/utils/findSavedView.ts

@@ -1,8 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-
-export function findSavedView(
-	views: SavedviewtypesSavedViewDTO[] | null | undefined,
-	id: string,
-): SavedviewtypesSavedViewDTO | undefined {
-	return views?.find((view) => view.id === id);
-}

frontend/src/container/SavedViews/utils/getSavedViewQuery.ts

@@ -1,17 +0,0 @@
-import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryEnvelope } from 'types/api/v5/queryRange';
-import { EQueryType } from 'types/common/dashboard';
-
-// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
-export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
-	const { queries, panelType } = view.spec;
-	return mapQueryDataFromApi({
-		queries: queries as QueryEnvelope[],
-		panelType: panelType as unknown as PANEL_TYPES,
-		queryType: EQueryType.QUERY_BUILDER,
-		unit: undefined,
-	});
-}

frontend/src/container/SavedViews/utils/getViewColumnsAndFormatting.ts

@@ -1,49 +0,0 @@
-import { SavedviewtypesSavedViewSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-import { Preferences } from 'providers/preferences/types';
-import { DataSource } from 'types/common/queryBuilder';
-
-function withColumnNames(
-	columns: TelemetryFieldKey[] | undefined,
-): TelemetryFieldKey[] | null {
-	if (!columns) {
-		return null;
-	}
-	return columns.map((column) => ({
-		...column,
-		name: column.name ?? column.key,
-	}));
-}
-
-// The columns and formatting the explorer shows for a saved view, with the
-// defaults filled in where the view has none.
-export function getViewColumnsAndFormatting(
-	spec: SavedviewtypesSavedViewSpecDTO | undefined,
-	dataSource: DataSource,
-): Preferences {
-	const selectedFields = spec?.selectedFields as TelemetryFieldKey[] | undefined;
-
-	if (dataSource === DataSource.LOGS) {
-		return {
-			columns: ensureLogsRequiredColumns(
-				withColumnNames(selectedFields) || defaultLogsSelectedColumns,
-			),
-			formatting: {
-				maxLines: spec?.display?.maxLines || 1,
-				format: (spec?.display?.format as LogViewMode) || 'table',
-				fontSize: (spec?.display?.fontSize as FontSize) || FontSize.SMALL,
-				version: 1,
-			},
-		};
-	}
-	if (dataSource === DataSource.TRACES) {
-		return { columns: selectedFields || defaultTraceSelectedColumns };
-	}
-	return { columns: [] };
-}

frontend/src/container/SavedViews/utils/hasUnsavedViewChanges.ts

@@ -1,81 +0,0 @@
-import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import isEqual from 'lodash-es/isEqual';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { HasUnsavedViewChangesArgs } from '../types';
-import { toSavedViewPanelType } from './toSavedViewSpec';
-import { getViewColumnsAndFormatting } from './getViewColumnsAndFormatting';
-
-// The server drops empty values when it stores a query, while the query
-// builder fills them with defaults, so both sides lose them before comparing.
-function withoutEmptyValues(value: unknown): unknown {
-	if (Array.isArray(value)) {
-		const items = value
-			.map(withoutEmptyValues)
-			.filter((item) => item !== undefined);
-		return items.length > 0 ? items : undefined;
-	}
-	if (value !== null && typeof value === 'object') {
-		const entries = Object.entries(value)
-			.map(([key, item]) => [key, withoutEmptyValues(item)] as const)
-			.filter(([, item]) => item !== undefined);
-		return entries.length > 0 ? Object.fromEntries(entries) : undefined;
-	}
-	if (value === null || value === '' || value === 0) {
-		return undefined;
-	}
-	return value;
-}
-
-// Compared as stored (v5 envelopes): mapped back to the builder's shape, each
-// side gets different defaults.
-export function hasUnsavedViewChanges({
-	view,
-	stagedQuery,
-	panelType,
-	options,
-}: HasUnsavedViewChangesArgs): boolean {
-	if (!stagedQuery) {
-		return false;
-	}
-	if (view.spec.panelType !== toSavedViewPanelType(panelType)) {
-		return true;
-	}
-
-	const { queries: stagedQueries } = mapCompositeQueryFromQuery(
-		stagedQuery,
-		panelType,
-	);
-	if (
-		!isEqual(
-			withoutEmptyValues(view.spec.queries),
-			withoutEmptyValues(stagedQueries),
-		)
-	) {
-		return true;
-	}
-
-	if (!options) {
-		return false;
-	}
-
-	const dataSource = stagedQuery.builder.queryData[0]?.dataSource;
-	const { columns, formatting } = getViewColumnsAndFormatting(
-		view.spec,
-		dataSource,
-	);
-	const toNames = (fields: { name?: string; key?: string }[]): unknown[] =>
-		fields.map((field) => field.name ?? field.key);
-	if (!isEqual(toNames(columns), toNames(options.selectColumns ?? []))) {
-		return true;
-	}
-
-	if (dataSource !== DataSource.LOGS || !formatting) {
-		return false;
-	}
-	return (
-		formatting.format !== options.format ||
-		formatting.maxLines !== options.maxLines ||
-		formatting.fontSize !== options.fontSize
-	);
-}

frontend/src/container/SavedViews/utils/toSavedViewSource.ts

@@ -1,23 +0,0 @@
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { SavedViewSourcePage } from '../types';
-
-// Explorers and the preferences module are keyed by DataSource (the signal),
-// the api keys views by source page. Same values today, so this is the one
-// place they meet. AI observability views will come with their own source and
-// DataSource cannot tell them apart from traces, so preferences should move to
-// source page at that point and this map goes with it.
-const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
-	{
-		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,
-		[DataSource.TRACES]: SavedviewtypesSourceDTO.traces,
-		[DataSource.METRICS]: SavedviewtypesSourceDTO.metrics,
-		meter: SavedviewtypesSourceDTO.meter,
-	};
-
-export function toSavedViewSource(
-	sourcePage: SavedViewSourcePage,
-): SavedviewtypesSourceDTO {
-	return SAVED_VIEW_SOURCE[sourcePage];
-}

frontend/src/container/SavedViews/utils/toSavedViewSpec.ts

@@ -1,80 +0,0 @@
-import {
-	Querybuildertypesv5QueryEnvelopeDTO,
-	SavedviewtypesDisplayDTO,
-	SavedviewtypesPanelTypeDTO,
-	SavedviewtypesSavedViewSpecDTO,
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { panelTypeToRequestType } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import { ToSavedViewSpecArgs } from '../types';
-
-const SAVED_VIEW_PANEL_TYPES = new Set<string>(
-	Object.values(SavedviewtypesPanelTypeDTO),
-);
-
-// Explorers only produce list / trace / graph / table; anything else a caller
-// hands over (a dashboard panel type) is stored as a time series view.
-export function toSavedViewPanelType(
-	panelType: PANEL_TYPES,
-): SavedviewtypesPanelTypeDTO {
-	return SAVED_VIEW_PANEL_TYPES.has(panelType)
-		? (panelType as unknown as SavedviewtypesPanelTypeDTO)
-		: SavedviewtypesPanelTypeDTO.graph;
-}
-
-// The api stores the field identity only; `key` and the column flags are ui state.
-function toFieldKey(
-	column: TelemetryFieldKey,
-): TelemetrytypesTelemetryFieldKeyDTO {
-	return {
-		name: column.name ?? column.key ?? '',
-		...(column.signal && {
-			signal: column.signal as unknown as TelemetrytypesSignalDTO,
-		}),
-		...(column.fieldContext && {
-			fieldContext:
-				column.fieldContext as unknown as TelemetrytypesFieldContextDTO,
-		}),
-		...(column.fieldDataType && {
-			fieldDataType:
-				column.fieldDataType as unknown as TelemetrytypesFieldDataTypeDTO,
-		}),
-		...(column.description && { description: column.description }),
-		...(column.unit && { unit: column.unit }),
-	};
-}
-
-export function toSavedViewSpec({
-	query,
-	panelType,
-	displayName,
-	options,
-	color,
-}: ToSavedViewSpecArgs): SavedviewtypesSavedViewSpecDTO {
-	const { queries } = mapCompositeQueryFromQuery(query, panelType);
-
-	const display: SavedviewtypesDisplayDTO = {
-		...(color && { color }),
-		...(options?.format && { format: options.format }),
-		...(options?.maxLines && { maxLines: options.maxLines }),
-		...(options?.fontSize && { fontSize: options.fontSize }),
-	};
-
-	return {
-		displayName,
-		panelType: toSavedViewPanelType(panelType),
-		requestType: panelTypeToRequestType(panelType),
-		queries: (queries ?? []) as unknown as Querybuildertypesv5QueryEnvelopeDTO[],
-		...(options?.selectColumns?.length && {
-			selectedFields: options.selectColumns.map(toFieldKey),
-		}),
-		...(Object.keys(display).length > 0 && { display }),
-	};
-}

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/useHandleExplorerTabChange.ts

@@ -73,20 +73,32 @@ export const useHandleExplorerTabChange = (): {
 			}
 
 			const query = currentQueryData?.query || getUpdateQuery(newPanelType);
-			const nextViewKey = currentQueryData?.viewKey || viewKey;
-			const nextViewName = currentQueryData?.viewName || viewName;
 
-			redirectWithQueryBuilderData(
-				query,
-				{
-					[QueryParams.panelTypes]: newPanelType,
-					...(nextViewKey ? { [QueryParams.viewKey]: nextViewKey } : {}),
-					...(nextViewName ? { [QueryParams.viewName]: nextViewName } : {}),
-				},
-				redirectToUrl,
-				undefined,
-				newTab,
-			);
+			if (redirectToUrl) {
+				redirectWithQueryBuilderData(
+					query,
+					{
+						[QueryParams.panelTypes]: newPanelType,
+						[QueryParams.viewName]: currentQueryData?.viewName || viewName,
+						[QueryParams.viewKey]: currentQueryData?.viewKey || viewKey,
+					},
+					redirectToUrl,
+					undefined,
+					newTab,
+				);
+			} else {
+				redirectWithQueryBuilderData(
+					query,
+					{
+						[QueryParams.panelTypes]: newPanelType,
+						[QueryParams.viewName]: currentQueryData?.viewName || viewName,
+						[QueryParams.viewKey]: currentQueryData?.viewKey || viewKey,
+					},
+					undefined,
+					undefined,
+					newTab,
+				);
+			}
 		},
 		[panelType, getUpdateQuery, redirectWithQueryBuilderData, viewName, viewKey],
 	);

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';
 };
@@ -149,6 +150,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,105 @@
+// Surface matches the shared Tooltip: same tokens, same radius, no shadow.
+// Padding lives on the sections so a footer can reach the container edges.
+.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;
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	font-size: 11px;
+	color: var(--text-vanilla-400);
+	flex-shrink: 0;
+}
+
+.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);
+}
+
+// The group values name the point; the channels are what it says.
+.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,114 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import { Pin } from '@signozhq/icons';
+
+import { ScatterTooltipProps } from '../types';
+import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
+
+import Styles from './ScatterTooltip.module.scss';
+
+/**
+ * One point, its channels, then the group values that name it. Purpose-built
+ * rather than composed from the shared `Tooltip`, whose list is one row per
+ * series at a shared x; a scatter point has no such neighbours.
+ */
+export default function ScatterTooltip({
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	channels,
+	resolvePointLabels,
+	decimalPrecision,
+	isPinned,
+	dismiss,
+	renderTooltipFooter,
+}: ScatterTooltipProps): JSX.Element | null {
+	const point = useMemo(
+		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
+		[uPlotInstance, seriesIndex, dataIndexes],
+	);
+
+	const rows = useMemo(
+		() => (point ? buildChannelRows(point, channels, decimalPrecision) : []),
+		[point, channels, decimalPrecision],
+	);
+
+	const labels = useMemo(
+		() =>
+			point
+				? (resolvePointLabels?.(point.seriesIndex, point.dataIndex) ?? [])
+				: [],
+		[point, resolvePointLabels],
+	);
+
+	if (!point) {
+		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: point.color, borderColor: point.color }}
+				/>
+				<span
+					className={Styles.title}
+					title={point.label}
+					data-testid="scatter-tooltip-title"
+				>
+					{point.label}
+				</span>
+				{isPinned && (
+					<span className={Styles.status} data-testid="scatter-tooltip-status">
+						<Pin size={12} />
+						<span>Pinned</span>
+					</span>
+				)}
+			</div>
+
+			<span className={Styles.divider} />
+
+			<div className={Styles.rows}>
+				{rows.map((row) => (
+					<div
+						key={row.label}
+						className={Styles.row}
+						data-testid="scatter-tooltip-row"
+					>
+						<span className={Styles.rowLabel}>{row.label}</span>
+						<span className={Styles.rowValue}>{row.value}</span>
+					</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"
+							>
+								<span className={Styles.rowLabel} title={label.key}>
+									{label.key}
+								</span>
+								<span className={Styles.rowValue} title={label.value}>
+									{label.value}
+								</span>
+							</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,98 @@
+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;
+}
+
+/** The point the cursor resolved to: the focused series' own index into its columns. */
+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,17 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
+/** Not part of `TooltipProps`: it describes one point's channels, not a series list. */
+export interface ScatterTooltipProps
+	extends BaseTooltipProps, TooltipRenderArgs {
+	channels: ScatterChannels;
+	/** The group values behind a point, e.g. `service.name` → `cart`. */
+	resolvePointLabels?: (
+		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> {
 		};
 	}
 
+	/** The axis line reads as the outermost grid line, so it takes the grid's style. */
+	private buildBorderConfig(
+		grid: uPlot.Axis.Grid | undefined,
+	): uPlot.Axis.Border | undefined {
+		if (this.props.showBorder === false || !grid) {
+			return undefined;
+		}
+		return { show: true, stroke: grid.stroke, width: grid.width };
+	}
+
 	/**
 	 * Build ticks configuration
 	 */
@@ -58,32 +68,49 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 	}
 
 	/**
-	 * Build values formatter for X-axis (time)
+	 * Build values formatter for X-axis: time, or a value axis when a unit or
+	 * precision is given (scatter). Neither leaves uPlot's numeric default.
 	 */
 	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)
+	 * Build values formatter for a value axis (values with units). A split outside
+	 * the scale's range gets no label: uPlot's arcsinh splits always include
+	 * ±threshold, and it would draw that label past the plot's edge.
 	 */
-	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 +128,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 
@@ -149,10 +176,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 +206,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 +221,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

@@ -19,6 +19,7 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
+	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -65,6 +66,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
+	private mode: PlotMode = PlotMode.Aligned;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -160,6 +163,15 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
+	/** Faceted series carry their own x column each; see `SeriesProps.facets`. */
+	setMode(mode: PlotMode): void {
+		this.mode = mode;
+	}
+
+	getMode(): PlotMode {
+		return this.mode;
+	}
+
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -512,6 +524,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

@@ -99,6 +99,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
+			asinhThreshold: this.props.asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

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

@@ -87,6 +87,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) {
@@ -122,7 +124,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points) {
+		// Scatter without a `pathBuilder` has nothing to draw its discs with.
+		if (drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter) {
 			return { paths: (): null => null };
 		}
 
@@ -194,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;
 	}
 
@@ -218,7 +225,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}
 
 	getConfig(): ExtendedSeries {
-		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
+		const { scaleKey, label, spanGaps, show = true, metric, facets } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -246,6 +253,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
+			...(facets && { facets }),
 		};
 	}
 }

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

@@ -120,6 +120,35 @@ 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('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 +405,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
@@ -651,3 +656,15 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
 	});
 });
+
+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.getMode()).toBe(PlotMode.Faceted);
+		expect(faceted.getConfig().mode).toBe(2);
+	});
+});

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

@@ -399,3 +399,39 @@ describe('UPlotSeriesBuilder', () => {
 		expect(builder.getConfig().fill).toBeUndefined();
 	});
 });
+
+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

@@ -78,8 +78,12 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit axis splits, overriding the default tick calculation. */
+	/** Explicit tick positions, replacing uPlot's per-distribution default. */
 	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,8 @@ 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 value ticks are formatted in (`spec.formatting.unit`). Named for the
+	 *  y axis, the only value axis until scatter; 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 +114,15 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
+	/** arcsinh: linear within ±`asinhThreshold`, logarithmic beyond. Takes zero and
+	 *  negatives, which a plain log cannot place. */
+	SymmetricLog = 'symlog',
+}
+
+/** uPlot's data layout: one shared x per chart, or per-series x/y columns. */
+export enum PlotMode {
+	Aligned = 1,
+	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -125,6 +139,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 +162,8 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
+	/** Faceted (mode 2) discs at per-series x/y, drawn by the caller's `pathBuilder`. */
+	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -229,6 +247,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };
+	/** 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/plugins/ScatterPlugin/__tests__/geometry.test.ts

@@ -0,0 +1,114 @@
+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();
+	});
+
+	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,288 @@
+import uPlot from 'uplot';
+
+import { PlotMode } from '../../../config/types';
+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;
+	});
+
+	beforeEach(() => {
+		(uPlot.orient as jest.Mock).mockImplementation(orientWithIdentityScales);
+	});
+
+	afterEach(() => {
+		(uPlot.orient as jest.Mock).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(builder.getMode()).toBe(PlotMode.Faceted);
+		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,96 @@
+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;
+}
+
+/**
+ * Extent of the size column across every series, so equal values draw equal
+ * discs whichever group they belong to. `null` when nothing carries a size.
+ */
+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;
+}
+
+/**
+ * Disc diameter for a size value. Area, not diameter, follows the value: a
+ * point worth twice as much should look twice as big.
+ */
+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);
+}
+
+/**
+ * Nearest disc under the cursor, or `null`. Overlapping discs resolve to the one
+ * whose centre is closest; `tolerance` widens every disc so thin points stay
+ * hoverable.
+ */
+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 left = hit.x - tolerance;
+			const top = hit.y - tolerance;
+			const right = hit.x + hit.w + tolerance;
+			const bottom = hit.y + hit.h + tolerance;
+			if (cx < left || cx > right || cy < top || cy > bottom) {
+				return;
+			}
+			const dx = cx - (hit.x + hit.w / 2);
+			const dy = cy - (hit.y + hit.h / 2);
+			const distance = dx * dx + dy * dy;
+			if (distance < bestDistance) {
+				best = hit;
+				bestDistance = distance;
+			}
+		},
+	);
+
+	return best;
+}

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

@@ -0,0 +1,234 @@
+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';
+
+/** Every scatter series reads its own x and y columns against the shared scales. */
+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 `ceil`s a cursor point's left/top but not its size, which pulls a ring
+ * up to 1px right and down of the disc. Snapping the edge to a whole pixel and
+ * growing the span by twice the snap keeps the centre exact.
+ */
+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 {
+	/** Draws every point of a series as one path and indexes the discs for hover. */
+	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;
+
+	// The domain spans every series, so it is resolved once per dataset rather than
+	// once per series path.
+	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 };
+			},
+			// An outline around the disc, so the point itself stays readable.
+			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 only knows what the path builder last drew, so cached paths
+				// must be rebuilt alongside it.
+				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,58 @@
+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;
+}
+
+/**
+ * One faceted series: parallel columns, one point per index. Sizes are in the
+ * caller's units and mapped to `pointSize` at draw time; `null` 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;
+}
+
+/** What each visual channel plots, for the tooltip and axes. */
+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,25 @@ 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,
+	};
+
+	// A faceted plot (scatter) has no shared x series, so `data[0]` is null and
+	// `posToIdx` would throw; the hit is the plot's own to resolve.
+	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 +212,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,59 @@
+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('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,70 @@
+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);
+	});
+
+	it('clear empties the tree', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
+		tree.clear();
+
+		expect(collect(tree, 0, 0, 100, 100).size).toBe(0);
+	});
+});

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

@@ -195,3 +195,40 @@ 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);
+	});
+
+	it('ranges a distr 4 scale through uPlot.rangeAsinh', () => {
+		const rangeAsinh = jest.fn(() => [-10, 1000] as uPlot.Range.MinMax);
+		Object.assign(uPlot, { rangeAsinh });
+
+		const rangeFn = scaleUtils.createRangeFunction({
+			rangeConfig: {} as uPlot.Range.Config,
+			hardMinOnly: false,
+			hardMaxOnly: false,
+			hasFixedRange: false,
+			min: null,
+			max: null,
+		});
+		const u = { scales: { y: { distr: 4, log: 10 } } } as unknown as uPlot;
+
+		expect(rangeFn(u, -3, 700, 'y')).toStrictEqual([-10, 1000]);
+		expect(rangeAsinh).toHaveBeenCalledWith(-3, 700, 10, true);
+	});
+});

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

@@ -0,0 +1,69 @@
+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];
+
+/**
+ * Splits at 1, 2 and 5 × 10ⁿ inside the scale. uPlot's own log splits step
+ * from the scale's minimum, so a range not snapped to a power of ten would
+ * label 10.79, 21.58, … instead.
+ */
+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) => {
+			// Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max].
+			const split = Number((multiple * 10 ** exponent).toPrecision(12));
+			if (split >= min && split <= max) {
+				splits.push(split);
+			}
+		});
+	}
+	return splits;
+};
+
+/**
+ * Labels for `logScaleSplits`: every power of ten, then any 2 or 5 that sits
+ * at least `space` px from the labels already kept, so a range spanning under
+ * one decade still reads at both ends.
+ */
+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,110 @@
+export interface QuadtreeRect {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+const MAX_OBJECTS = 10;
+const MAX_LEVELS = 4;
+
+/**
+ * Spatial index over axis-aligned rectangles, for answering "what is under the
+ * cursor" on charts whose marks have no shared x order to binary-search. An item
+ * straddling a quadrant boundary lives in every quadrant it touches, so `get` can
+ * report it more than once.
+ */
+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),
+			);
+		}
+	}
+
+	clear(): void {
+		this.items = [];
+		this.quadrants = null;
+	}
+
+	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;
+		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,
@@ -197,6 +210,33 @@ function getLogScaleRange(
 	);
 }
 
+/**
+ * Computes the arcsinh-scale range using uPlot.rangeAsinh, which pads to whole
+ * magnitudes on either side of zero and pins an edge that sits exactly on zero.
+ */
+function getAsinhScaleRange(
+	minMax: Range.MinMax,
+	params: RangeFunctionParams,
+	dataMin: number | null,
+	dataMax: number | null,
+	logBase?: uPlot.Scale['log'],
+): Range.MinMax {
+	const { min, max } = params;
+	const resolvedMin = min ?? dataMin;
+	const resolvedMax = max ?? dataMax;
+
+	if (resolvedMin == null || resolvedMax == null) {
+		return minMax;
+	}
+
+	return uPlot.rangeAsinh(
+		resolvedMin,
+		resolvedMax,
+		(logBase ?? 10) as 2 | 10,
+		true,
+	);
+}
+
 /**
  * Snaps log-scale [min, max] to exact powers of logBase (nearest magnitude below/above).
  * If min and max would be equal after snapping, max is increased by one magnitude so the range is valid.
@@ -299,6 +339,8 @@ export function createRangeFunction(
 			minMax = getLogScaleRange(minMax, params, dataMin, dataMax, logBase);
 			const logFn = scale.log === 2 ? Math.log2 : Math.log10;
 			minMax = adjustLogRange(minMax, (logBase ?? 10) as number, logFn);
+		} else if (scale.distr === 4) {
+			minMax = getAsinhScaleRange(minMax, params, dataMin, dataMax, logBase);
 		}
 
 		minMax = applyHardLimits(minMax, params, scale.distr ?? 1);

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, useState } 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 {
+	buildScatterConfig,
+	prepareScatterChartData,
+	ScatterAxisScale,
+	ScatterSeries,
+} 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 THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 300,
+		thresholdUnit: 'ms',
+		thresholdColor: '#E5484D',
+		thresholdLabel: 'p99 SLO',
+	},
+];
+
+function ScatterStory(props: ScatterStoryProps): JSX.Element {
+	const {
+		xScale,
+		yScale,
+		sized,
+		thresholds,
+		pointSize,
+		fillOpacity,
+		width,
+		height,
+	} = props;
+	const isDarkMode = useIsDarkMode();
+	const [drawMs, setDrawMs] = useState<number | null>(null);
+
+	const series = useMemo(() => buildSeries(props), [props]);
+	const pointCount = series.reduce((sum, entry) => sum + entry.xs.length, 0);
+	const drawLabel = drawMs === null ? '—' : `${drawMs.toFixed(1)} ms`;
+
+	const config = useMemo(() => {
+		const builder = buildScatterConfig({
+			id: 'scatter-story',
+			series,
+			isDarkMode,
+			x: { unit: 'reqps', scale: xScale },
+			y: { unit: 'ms', scale: yScale },
+			pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
+			fillOpacity,
+			thresholds: thresholds ? THRESHOLDS : undefined,
+		});
+		let started = 0;
+		builder.addHook('drawClear', (): void => {
+			started = performance.now();
+		});
+		builder.addHook('draw', (): void => {
+			setDrawMs(performance.now() - started);
+		});
+		return builder;
+	}, [series, isDarkMode, xScale, yScale, pointSize, fillOpacity, thresholds]);
+
+	const data = useMemo(() => prepareScatterChartData(series), [series]);
+
+	const resolvePointLabels = (
+		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' } }),
+				}}
+				resolvePointLabels={resolvePointLabels}
+				canPinTooltip
+			/>
+			<p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, opacity: 0.7 }}>
+				{`${pointCount.toLocaleString()} points · last draw ${drawLabel}`}
+			</p>
+		</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' },
+};
+
+/** Horizontal line with label on the y axis; the scale stretches to include it. */
+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,102 @@
+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 type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import uPlot from 'uplot';
+
+import { ScatterChartProps } from 'lib/visualization/charts/types';
+
+import { getSeriesStroke } from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
+
+import { getCursorHit } from './utils';
+
+// Faceted uPlot reads series 1's facets at init, so a chart with no series cannot
+// mount; empty aligned data makes the shell show its no-data state instead.
+const EMPTY_ALIGNED_DATA: uPlot.AlignedData = [[]];
+
+export default function Scatter(props: ScatterChartProps): JSX.Element {
+	const {
+		children,
+		customTooltip,
+		channels,
+		resolvePointLabels,
+		pinnedTooltipElement,
+		onPointClick,
+		plotRef,
+		...rest
+	} = props;
+
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const handlePlotRef = useCallback(
+		(plot: uPlot | null): void => {
+			plotInstanceRef.current = plot;
+			plotRef?.(plot);
+		},
+		[plotRef],
+	);
+
+	// The shared click data finds its series by x position, which a faceted plot
+	// has no single axis for; the hit comes from the cursor instead.
+	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,
+				resolvePointLabels,
+				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
+				renderTooltipFooter: rest.renderTooltipFooter,
+			};
+			return <ScatterTooltip {...tooltipProps} />;
+		},
+		[
+			customTooltip,
+			channels,
+			resolvePointLabels,
+			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__/scatterRange.test.ts

@@ -0,0 +1,97 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import { createScatterRange, type ScatterRangeOptions } from '../scatterRange';
+
+/** 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,217 @@
+import type uPlot from 'uplot';
+import { DistributionType } from 'lib/uPlotV2/config/types';
+
+import {
+	buildScatterConfig,
+	getCursorHit,
+	prepareScatterChartData,
+	resolveAxisDistribution,
+	ScatterAxisScale,
+	ScatterSeries,
+} 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();
+	});
+});
+
+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', () => {
+		it.each([
+			[
+				'positive values spanning three decades',
+				[1, 1000],
+				DistributionType.Logarithmic,
+			],
+			['positive values spanning less', [1, 999], DistributionType.Linear],
+			['a wide span that includes zero', [0, 1, 1e6], DistributionType.Linear],
+			['no finite values', [Number.NaN], DistributionType.Linear],
+		])('picks a scale for %s', (_, values, distribution) => {
+			expect(resolveAxisDistribution(values, ScatterAxisScale.Auto)).toStrictEqual(
+				{ distribution },
+			);
+		});
+
+		it('stays linear when a soft limit reaches zero or below', () => {
+			expect(
+				resolveAxisDistribution([0.02, 5000], ScatterAxisScale.Auto, [-10]),
+			).toStrictEqual({ distribution: DistributionType.Linear });
+		});
+
+		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([1, 1e4])).toStrictEqual({
+				distribution: DistributionType.Logarithmic,
+			});
+		});
+	});
+});
+
+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({
+			thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
+		}).getConfig();
+
+		expect(config.hooks?.draw).toHaveLength(1);
+		expect(build().getConfig().hooks?.draw).toBeUndefined();
+	});
+});

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

@@ -0,0 +1,108 @@
+import { DistributionType } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import type { AxisDistribution } from './utils';
+
+interface ScaleTransform {
+	forward: (value: number) => number;
+	inverse: (position: number) => number;
+}
+
+/** The space uPlot lays the scale out in, so a pixel margin is the same size along it. */
+function getScaleTransform({
+	distribution,
+	asinhThreshold = 1,
+}: 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,
+			};
+	}
+}
+
+/** Half the span a single value spreads to, 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;
+}
+
+export interface ScatterRangeOptions extends AxisDistribution {
+	/** The axis this scale is laid out along. */
+	dimension: 'x' | 'y';
+	/** CSS pixels kept clear at each end so the largest dot draws whole. */
+	marginPx: number;
+	softMin?: number | null;
+	softMax?: number | null;
+}
+
+/**
+ * Fits the scale to the data and then widens it by `marginPx` at each end.
+ * uPlot clips series to the plot area, so a dot at the extreme value would
+ * otherwise lose the half that hangs past the edge. Log scales are left
+ * unsnapped: rounding out to the next power of ten after the margin can add a
+ * whole 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)];
+	};
+}