## Problem
In a database report, dragging over a chart to open logs had two bugs.
Clicking a bar instead of dragging produced a zero-width selection (its
=== ite), so the logs view showed no results. Separately, the logs
datepicker crashed with "Invalid time value" because the chart put raw
epoch-ms values into the its/ite URL params, which get parsed with new
Date(string) and yield an Invalid Date that react-day-picker cannot
format.
## Fix
The chart now emits ISO timestamps in the logs URL so its/ite match the
format every other logs consumer already uses, and the datepicker guards
against unparseable values from any source (such as old bookmarked
links). A single click now expands the highlight to the clicked bucket,
from the bar's start to the next bar's start, so the selection, popover,
and logs range all cover the bar the user picked.
## How to test
1. Open a database report with a chart (for example Postgres, project
logs).
2. Drag across the chart, choose "Open in Postgres Logs", then open the
timepicker. Expected: it opens without crashing and shows the selected
range.
3. Go back and single-click one bar instead of dragging. Expected: that
bar's bucket is selected and "Open in Postgres Logs" loads logs for a
real, non-empty range.
4. Run the chart tests, expected all pass: pnpm --filter studio exec
vitest --run components/ui/Charts
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Prevented invalid log date inputs from creating invalid date
selections.
* Improved chart “open logs” links by normalizing the selected time
bounds (now consistently sent as ISO timestamps).
* Refined chart highlight behavior for click-to-advance and more
accurate left/right range selection, supporting both numeric and string
coordinate values.
* Updated the chart highlight dropdown display for clearer formatting of
numeric vs non-numeric dates.
* **Tests**
* Added Vitest coverage for chart highlight click, drag, and left/right
ordering scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Subtle improvement to charts that cannot load data. Less floaty.
| Before | After |
|--------|--------|
| <img width="731" height="323" alt="Screenshot 2026-06-08 at 11 46 21"
src="https://github.com/user-attachments/assets/14c87766-dfe3-448d-8c9c-f3176b658d08"
/> | <img width="791" height="333" alt="Screenshot 2026-06-08 at 11 46
01"
src="https://github.com/user-attachments/assets/d0e33b91-2990-41d2-b14c-25065b1f0c12"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
**Style**
- Improved visual styling for chart error and loading states. Chart
placeholders now feature increased height and enhanced border
presentation with dashed borders and rounded corners, providing clearer
visual distinction when data is unavailable or unable to load.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes [DEBUG-94](https://linear.app/supabase/issue/DEBUG-94)
## Summary
- **Min MB units**: Added \`formatBytesMinMB\` helper that always
formats byte values in at least MB. Applied to RAM and swap y-axis tick
formatters, tooltips, and chart headers.
- **Swap chart scale**: Every Supabase compute instance is provisioned
with **1 GB of swap regardless of size** (per
[docs](https://supabase.com/docs/guides/troubleshooting/memory-and-swap-usage-explained-aPNgm0)),
so the swap y-axis always shows at least 0 to 1 GB. Low swap usage no
longer fills the full chart height. Removed the show/hide limit toggle
since the limit is implicit in the y-axis scale.
- **Swap units in header/tooltip**: Fixed all three formatters (initial
header, hover-sync header, tooltip) to use \`formatBytesMinMB\` for swap
so the value always shows a unit like "2.00 MB".
- **Reference-line defensive fix**: Added a \`customValue\` fallback in
\`useAttributeQueries\` so future reference-line attributes that use
\`customValue\` instead of \`value\` are not silently overwritten to 0.
## Test plan
- [ ] Open DB Reports and verify RAM/Swap y-axis labels show MB (or GB
for large values), never KB or bytes
- [ ] Hover a bar in the swap chart and verify tooltip and header show
the same value with a unit (e.g. "2.00 MB")
- [ ] With low or zero swap usage, the chart bars are flat and the
y-axis goes 0 to 1 GB
- [ ] CPU chart limit toggle still renders at 100% (regression check on
the \`useAttributeQueries\` fallback change)
🤖 Generated with [Claude Code](https://claude.ai/claude-code)
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Recent database report PRs introduced `(value: any)` type annotations in
recharts `tickFormatter` callbacks, pushing the
`@typescript-eslint/no-explicit-any` ESLint ratchet from baseline 1014
to 1017 and blocking all PR merges.
## Fix
Replace `(value: any)` with `(value: number)` in all affected
`tickFormatter` callbacks across the three flagged files. Recharts
always passes a number to tick formatters, so this is a safe and
accurate type.
## How to test
- Run `pnpm lint --filter=studio` and confirm no new
`@typescript-eslint/no-explicit-any` violations appear in the three
changed files
- Check the ESLint ratchet count is back at or below baseline 1014
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved type safety for Y‑axis tick formatters across observability
charts (Memory, Swap, Network throughput, Disk IOPS/throughput/usage,
Replication Lag), ensuring tick values are treated as numeric for more
consistent chart rendering and reliability.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45794)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* feat: rename reports to observability on nav sidebar
* fix: observability route
* feat: observability navigation and redirects
* fix: first time load redirects
* feat: change auth overview reports link
* feat: clean up of other links to observability sections
* fix: query perf redirects
* chore: find exhaustive deps and disable for time being
* fix: charis suggested fixes
* fix: forgotten suggested fix
* chore: delete old reports views files
* fix: paths in reports tests
* fix: url sync useEffect should trigger only once
* feat: reorganise observability sidebar
* fix: data api not being selected
* fix: wrong layout for realitime
* fix: custom reports reloading
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* wip
* add formatTimestamp for reports
* add tests for formatTimestamp
* fix type err
* rm old chart logic
* do not retry replication sources
* update report config schema
* use report config
* fix charts, simplify config
* sync charts
* rm comment
* usefilltimeseries
* move chart upsell to its own component
* cleanup v2 chart component
* fix chartheader function format bug
* make attributes dynamic
* move types to its own file
* update reportv2chart types
* update reportv2 chart type
* use new edgefn report
* rm mock
* rm old code
* fix type err
* fix type err
* rename hook
* return sql in dataprovider
* add button to open in log explorer in chart header
* fix type
* fix chart type toggle
* fix type error
* export data transformation for testing
* add tests for data transformation
* rm dupped code
* add report settings to edge fn report
* rm mocked data
* rename
* fix type err
* Apply suggestion from @joshenlim
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* rm unnecessary div
* rm unnecessary props from report upsell
* cleaner query keys
* move loadin/error/empty states to inside panel content to prevent layout shift
* use card instead of panel
* use buttontooltip in chartheader
* use buttontooltips in buttons with tooltips
* rm export default
* rm export defualt
* rm i from key
* fix status code transformation
* fix filltimeseries
* add tests for filltimeseries
* fix data transform
* pass xaxis key to chart
* refactor hover state to use timestamp not index
* fix tests
* fix areachart
* fix barchart
* fix chartheader
* fix composedchart
* fix stacked
* fix type missing xaxiskey
* type fix
* Revert "refactor hover state to use timestamp not index"
This reverts commit cfd7886460.
* undo charthover changes, fix data aggregation
* Revert "fix tests"
This reverts commit e5200a2035.
* move transforms to testable functions, add tests
* nit refactors and clean up
* feat: add aws nimbus cloud provider (#38312)
* feat: add aws nimbus cloud provider
* Fix return type of useCustomContent hook
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add utc plugin to dayjs
* move plugins to vitest setup
* rm customparser plugin
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* use similar ui styles for different charts
* fix naming
* use similar styles, fix height
* rm year from tooltip timestamp
* remove unnecessary code in useChartData
* release charts to Teams and Enterprise
* update db charts
* clean up chart types and add disk_fs_used_system
* show update data for Disk Size chart
* remove feature flag release
* update PostgREST connections tooltip
* show percentage in tooltip only if value is not percentage itself
* show percentage in tooltip only if value is not percentage itself
* insert disk_fs_used_system
* update db disk size chart
* reorder admin connection
* improve legend items hover
* show yAxis label
* open range in logs explorer
* add provisioned disk size to Memory Usage chart
* temp new charts
* Network Traffic chart
* sync charts marker
* update api types
* fix layout
* add max memory
* add db size
* chore: remove unused properties
* disk_io_usage
* add max db and pooler connections
* chart header tooltip
* clean charts
* add cpu max
* refactor charts and change max color
* reference line on Database Size chart
* reference line text
* reference lines on Database Size chart
* fix aggregation
* legend spacing
* reference line
* add docsUrl
Pamela Chia
