Commit Graph

20 Commits

Author SHA1 Message Date
Saxon Fletcher
4ee43f3585 chore(studio): refine Explorer query UI (#49895)
## 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?

UI refinements for Explorer query surfaces.

## What is the current behavior?

- The assistant chat textarea uses a tighter radius than the Run SQL /
Create a notebook cards on Explorer home.
- Chart results sit unevenly in the results pane because axis gutters
stack on card padding, and long Y labels can clip.
- Selecting SQL in the editor changes the primary Run button to Run
selected, which is easy to trigger by accident.
- The Prettify SQL icon in notebook query cells uses Lucide's default
size, so it doesn't match other toolbar actions.

## What is the new behavior?

- Assistant chat form uses `rounded-lg` so it matches the home action
cards everywhere the form is used.
- Query result charts collapse unused axis space, add a little padding
when labels are on, and size the Y axis from formatted ticks so longer
labels fit.
- Run is a default split button that always executes the full query. Run
selected is a secondary menu item, disabled until SQL is selected.
- Notebook cell Prettify SQL icons use `size={16}` and `strokeWidth={2}`
like the rest of the Explorer toolbar.

## Additional context

Cmd+Enter in the editor still runs the current selection when there is
one.

## Test plan

- [ ] Open Explorer home and confirm the assistant chat radius matches
the Run SQL and Create a notebook cards.
- [ ] Run a query, switch to chart view, and check spacing with labels
off and on, including large Y values.
- [ ] With no selection, click Run and confirm the full query runs. Open
the split menu and confirm Run selected is disabled.
- [ ] Select SQL, click Run, and confirm the full query still runs. Use
Run selected from the menu to run only the selection.
- [ ] In a notebook query cell, confirm Prettify SQL matches the size
and stroke of nearby toolbar icons.


Made with [Cursor](https://cursor.com)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added a split Run control in the query editor, with separate actions
for running all content or only selected text.
  - Added support for customizing chart X-axis display settings.
- Improved chart Y-axis sizing, scaling, and tick formatting for clearer
results.

- **Bug Fixes**
  - The “Run selected” action is unavailable when no text is selected.

- **Style**
- Updated toolbar icon sizing and added rounded corners to the assistant
chat input.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-03 09:44:45 +10:00
Joshen Lim
c0409b38b4 joshenlim/fe 4285 explorer missing prettify in query toolbar actions (#49675)
## Context

Adds the prettify SQL CTA to Explorer Notebook and Query Tab

Query tab: Prettify CTA is within the dropdown menu here
<img width="1092" height="272" alt="image"
src="https://github.com/user-attachments/assets/3b4f3514-69cc-4c24-a127-da1555ee905e"
/>

Query cell: Prettify CTA sits between the buttons in the toolbar
<img width="1085" height="306" alt="image"
src="https://github.com/user-attachments/assets/e503ad6c-5dda-4c2b-a824-8c1049d5e9fb"
/>

Also added shortcut tooltip for the run button
<img width="183" height="103" alt="image"
src="https://github.com/user-attachments/assets/729055b8-8e2c-4cf7-8f2e-c5726e828644"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added SQL prettification to Explorer query editors through the
overflow menu, query toolbar, editor action, and keyboard shortcut.
* Displays the configured formatting shortcut alongside the prettify
action.
  * Prevents formatting while an AI proposal is pending.
  * Added a keyboard shortcut hint to the query run action.
  * Enhanced toolbar tooltips to support richer formatted content.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-31 23:44:42 +09:00
Joshen Lim
f1526d2d1b Fix running queyr cell marks notebook tab with unsaved change indicator (#49464)
## Context

Fixes a small bug whereby running any query cell within a notebook will
mark the notebook tab with the unsaved changes status indicator

`handleSqlCommit` gets called when we run the query, and it flips the
notebook's status to "unsaved" hence why its happening. Hence opting to
skip committing the changes in `handleSqlCommit` if there's no change to
the SQL content

<img width="224" height="69" alt="image"
src="https://github.com/user-attachments/assets/7015b527-b249-4f2e-bcf1-948b5fe3f5a9"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
- Prevented unnecessary notebook updates when committed SQL is
unchanged.
  - Continued saving SQL changes as expected.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 11:57:04 +08:00
Joshen Lim
5c6ef8ae3d Joshenlim/fe 4221 explorer tab behaviours to mimic sql editor (#49386)
## Context

Improves the tab behaviour for explorer to follow the SQL Editor
- Tabs now start as preview tabs and become permanent once you start
interacting with them
 - Query Tabs become permanent as soon as you start typing in the editor
- Chat tabs become permanent as soon as you start typing in the chat
input
- Notebook tabs become permanenet as soon as you make any changes to the
notebook
- Notebooks with unsaved changes will show the orange dot indicator
<img width="197" height="67" alt="image"
src="https://github.com/user-attachments/assets/3005c379-a49a-4cd8-8d90-65406b186141"
/>
- Closing a notebook tab with unsaved changes will show a confirmation
dialog
  - Except if the new notebook has no content (no changes)
<img width="375" height="218" alt="image"
src="https://github.com/user-attachments/assets/6ad10779-6415-4c55-bb4f-61d938e744c9"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Explorer chat, query, and notebook tabs now begin as previews and
become permanent when edited or saved.
* Added unsaved-change indicators and close confirmation for edited
notebook tabs.
  * Confirmed closure of edited notebooks now discards unsaved changes.
* **Bug Fixes**
  * Improved restoration and persistence of Explorer drafts.
  * Notebook saves now reflect the latest edits and tab state.
* Prevented stale save responses from incorrectly marking newer edits as
saved.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-24 14:35:22 +08:00
Saxon Fletcher
d93defe1e0 feat(studio): refine notebook query cell layout (#49350)
<img width="2326" height="1257" alt="image"
src="https://github.com/user-attachments/assets/d0f63793-ff58-4f48-971f-0622d375b3c7"
/>


## 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?

Studio UI improvement.

## What is the current behavior?

Explorer notebook query cells can extend beyond the intended reading
width, and saved notebooks open with SQL code expanded.

## What is the new behavior?

- Caps Explorer notebook query cells at `max-w-6xl`.
- Hides SQL code by default in saved notebooks.
- Keeps SQL visible by default for new notebooks.

## To test

1. Open a saved Explorer notebook with query cells. Confirm each cell is
capped at the wider notebook width and its SQL editor is initially
collapsed.
2. Expand a saved query cell and confirm the existing SQL and result
remain available.
3. Create a new notebook, add a query cell, and confirm its SQL editor
is initially visible.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Added controls to show or hide SQL for individual query cells.
* Query visibility is preserved when switching notebook tabs or
reopening them.
* New notebooks display SQL by default, while saved notebooks can hide
SQL editors.
  * Expanded the query editor width for improved readability.

* **Bug Fixes**
* Prevented visibility settings from affecting notebook save status or
unrelated cells.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 14:27:51 +08:00
Charis
8bdfe03fe7 refactor(studio): drop notebook type widening now that the API supports it (#49272)
## Summary

- Regenerates `packages/api-types` for the content endpoints now that
the Platform API's `notebook` content type has landed (list/get/upsert
`type` enums, plus `UpsertContentBody`'s notebook cell shape with
`_id`/`y_series`). Unrelated schema drift from the same regen
(Warehouse, SSO, notification exceptions, etc.) is excluded — only the
content-endpoint hunks are applied.
- Removes every local widening cast added while the API support was
pending (`content-query.ts`, `content-infinite-query.ts`,
`notebook-query.ts`, `notebook-upsert-mutation.ts`,
`sql-folders-query.ts`).
- What remains is scoped and renamed to match: draft ids
(`generateDraftId`/`isDraftId`), used only for cells created client-side
in the editor before their first save, dropped before they'd ever reach
the backend as a fake `_id`.

## Test plan

- [x] `pnpm typecheck` — clean
- [x] `pnpm --filter studio test` — full suite passes (518 files / 5471
tests)
- [x] `pnpm --filter studio run lint:ratchet` — no new warnings
- [x] `pnpm format` / prettier — clean

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved notebook cell tracking during editing, reordering, insertion,
and deletion.
* Preserved existing cell identifiers while removing temporary draft
identifiers before saving.
* Improved chart configuration for selecting and displaying multiple
Y-axis series.
  * Strengthened notebook validation and content persistence behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-20 13:06:41 +08:00
Joshen Lim
7adc83ee39 Implement run notebook functionality (#49178)
## Context

Implements the "Run notebook" functionality which will run all database
or logs cells within the notebook.

<img width="206" height="110" alt="image"
src="https://github.com/user-attachments/assets/703f4f78-1e3c-43b8-8c7e-771720ac3464"
/>

Am opting to do some via `useImperativeHandle` in `QueryEditor` to
expose the `run` method, then having `ExplorerNotebookTab` calling `run`
on each database / logs cells for the run notebook action.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a “Run notebook” action to execute all database and log query
cells together.
- The action displays a loading state and is disabled while running or
when no executable cells are available.
- Query results continue to update after execution, including when
individual queries encounter errors.

- **Tests**
- Added coverage for running executable cells and handling notebooks
without runnable queries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-18 14:55:14 +08:00
Joshen Lim
b6e43311d3 Reorganize explorer folder structure (#49172)
## Context

Just reorganizing the files under the Explorer folder as details are a
bit more clearer

Mainly shifting related and exclusive files into their own folder and
tests into `__tests__` folder + renaming some files

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added query result display settings for switching between table and
chart views.
- Added chart configuration options for chart type, axes, scaling,
cumulative mode, and labels.
- Automatically prevents invalid logarithmic scaling when chart data is
incompatible.

- **Refactor**
- Standardized Explorer tab and query source naming across the interface
without changing existing behavior.
- Updated Explorer navigation, routing, and page wiring to use the
standardized components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-18 14:40:53 +08:00
Joshen Lim
097a105663 joshenlim/fe 4176 add role impersonation to explorerquerysourcemenu (#49101)
## Context

Stacked off from https://github.com/supabase/supabase/pull/49098 - adds
role impersonation for both Notebook Query cell + Explorer Query tab

Note that this refactors the role impersonation state a little to
decouple some stuffs to make this work, since the role impersonation
state is global and we need a local state to support this UX

Similarly to row limit, for query tab its intentional that for now that
the role impersonation isn't scoped to the query draft atm as I wanna
avoid making changes to explorer-query given there was a couple of PRs
in flux that adjusts that file - will handle that separately

<img width="1117" height="577" alt="image"
src="https://github.com/user-attachments/assets/9bfd6287-efff-418b-a1c0-934ee2c840cb"
/>

<img width="1917" height="436" alt="image"
src="https://github.com/user-attachments/assets/bfd1be82-8f77-4764-bd3a-4b9c63169b82"
/>


## To test
- [ ] Verify that role impersonation works in notebook query cell
- [ ] Verify that role impersonation works in notebook query tab

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Added role impersonation support to SQL Explorer queries.
* Users can select an impersonated role directly from database query
menus.
  * Query execution now applies the selected role when configured.
* Added local role selection state for individual query tabs and cells.
* Improved reuse and consistency of role impersonation controls across
the interface.
* Role selections and impersonation details remain synchronized across
supported query components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-17 14:22:50 +08:00
Joshen Lim
d61477085e Joshenlim/fe 4175 add row limit in explorerquerysourcemenu (#49098)
## Context

Related to Explorer/Notebook - builds on the ExplorerQuerySourceMenu by
adding an option for row limit in both Notebook Query cell + Query Tab

## Side note RE persistence of the selected row limit value
Note that for QueryTab - its intentional that for now that the row limit
isn't scoped to the query draft atm as I wanna avoid making changes to
`explorer-query` atm as there's a couple of PRs in flux that touches
that file. So will handle that separately

^ This means that switching between query tabs will not change nor
persist the row limit

<img width="931" height="335" alt="image"
src="https://github.com/user-attachments/assets/d1d52ee7-7c1d-42aa-a6ae-1d7d99ab95c9"
/>

<img width="1381" height="486" alt="image"
src="https://github.com/user-attachments/assets/689368c9-c0fc-4000-a09e-f59bfa7afa97"
/>

## To test
- [ ] Verify that row limit behaviour works in notebooks
- [ ] Verify that row limit behaviour works in explorer query tab
2026-08-17 13:36:31 +08:00
Charis
628473b3eb refactor(studio): extract notebook query-cell logic and give log cells display settings (#49075)
Final PR of the stack. #49069, #49070, #49072 and #49074 have merged, so
this now targets `master` directly.

**Rebased onto latest `master`**, which includes the centralized
result-rendering work (#49096). See "Conflict resolution" below.

## What's left after master's own fixes

`QueryCell` was written for database cells and adapted to log cells
afterwards. Master has since fixed most of it directly:
`handleUpdateCell` no longer bails on a non-database cell, the cell's
own binding is read via `getQuerySourceBinding`, and
`database_identifier` / `time_range` propagate across a source change.

What remains:

- **`display` was only passed for database cells**, so the `view` field
on `log_cell` stayed unreachable and a logs query could never be
charted. That is the one behavioral fix left in this PR.
- The per-backend branching is inline and untested.

## What changed

Per-backend logic moves into `QueryCell.utils.ts`, where it is
unit-tested: `changeCellSource`, `setCellSql`, `cloneQueryCell`,
`getCellDisplay`, `toQueryModel`. Each narrows on the cell tag exactly
once, so the SQL brand and the backend's parameters stay correlated
rather than being re-derived at each call site. `cloneQueryCell` also
rebuilds the chart's series array, which valtio hands over as `readonly
string[]`.

`NotebookEditor` renders through `isQueryCell` (#49069) rather than a
tag switch, so a new backend gets picked up by classifying it in
`CELL_KINDS` instead of by remembering to add a `case`.

## Conflict resolution

Two rounds of master's work landed in this file set.

**`QueryCell/index.tsx` (master's own rework).** `changeCellSource`
**subsumes the four source-change branches** master had inline, each
covered by a test:

| Master's branch | Test |
|---|---|
| database → database (replica change) | `keeps the query when only the
database changes` |
| logs → logs (time-range change) | `keeps the query when only the log
time range changes` |
| database → logs | `carries the query text over when moving from the
database to logs` |
| logs → database | `carries the query text over and restores a default
row limit …` |

Two improvements fall out of consolidating them:

- A **logs → database** move now keeps the selected replica; pinned by
`applies the selected database when moving from logs to the database`.
- The row-limit default is **named** rather than a hard-coded `100`.
`Explorer/utils.ts` now shares `DEFAULT_CELL_ROW_LIMIT` with
`createQueryCellSkeleton`, so cell creation and backend conversion can't
drift.

Untouched from master: `snap.updateCell`, `AddCellDropdown`,
`MoveCellDropdownContent`, the `SortableSection` grip props, and
`NotebookEditor`'s add-cell buttons, skeletons, `reorderCells` and
`insertCellAfter`.

**Centralized result rendering (#49096).** That PR moved
`QueryCell/QueryResultChart.tsx` up to `Explorer/`, split
`QueryResultTable` into `QueryResultError`, and added
`QueryResultRenderer`. Since this PR removes `QueryChartConfig`, the
type swap had to follow the move and also reach `QueryResultRenderer`,
which is new and referenced the removed type. `QueryResultRenderer`,
`QueryResultError` and `DataGridResults` are otherwise untouched — the
empty/error-state centralization is fully preserved, and `QueryEditor`
still renders through it.

## Behavior worth a second opinion

`changeCellSource` **carries the query text across a backend change**
and rebrands it. This is probably not what a user wants — Postgres SQL
and logs SQL are separate dialects over separate schemas, so a
carried-over query will usually fail to run, and the rebrand asserts a
dialect the text was never written in.

Keeping it for now because it destroys nothing and needs no confirmation
prompt. The tradeoff is written up at the function. Worth revisiting
once we know whether people switch source to port an existing query or
to start a fresh one — if it's the latter, clearing the body behind a
confirmation is the better answer.

Results *are* dropped on a backend change, since another engine returns
unrelated columns.

## Incidental

`Explorer/types.ts` drops `QueryChartConfig`, which duplicated the wire
schema's `ChartConfig` field for field. `chart` stays persisted
alongside `view`, so switching to the table and back returns the user's
chart settings rather than rebuilding them.

## Verification

Typecheck, Prettier, and the lint ratchet clean. 1013 tests pass across
`state/`, the Explorer surfaces, notebooks, query sources, `data/sql`,
the SQL editor, and `components/ui`; 13 of them are new coverage for the
extracted helpers.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Improved notebook cell rendering with more consistent handling of
query and markdown cells.
- Query cells now preserve SQL, source settings, display preferences,
chart configuration, and query results when edited or switched between
sources.
  - Added a default limit of 100 rows for applicable database queries.

- **Bug Fixes**
- Prevented stale query results from carrying over when changing query
sources.
- Improved chart configuration consistency across query results and
display settings.

- **Tests**
- Added comprehensive coverage for query-cell updates, source
transitions, SQL changes, display state, and chart data.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-14 09:42:18 -04:00
Joshen Lim
ebb8e2336e Centralize empty state + error handling for query results (#49096)
## Context

Related to Explorer/Notebook - currently with the chart view, if the
query has any errors, there's no error UI being shown
Mainly because the error UI handlers are all within the table view

Changes here hence opt to extract the empty state + error UI into a
centralized renderer

<img width="936" height="366" alt="image"
src="https://github.com/user-attachments/assets/437891dc-241e-4c43-97a6-6eef52472ee7"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added unified query result display for prompts, errors, empty results,
tables, and charts.
  * Query results now switch consistently between table and chart views.

* **Bug Fixes**
  * Improved empty-result layout centering across views.
  * Expanded error display to use the available width.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-14 19:57:36 +07:00
Charis
b5bfc70c06 fix(studio): correlate a query's SQL brand with the backend it runs against (#49074)
Fourth of the stack; PRs 1–3 (#49069, #49070, #49072) have merged, so
this now targets `master` directly.

**Rebased onto latest `master`.** See "Conflict resolution" at the
bottom for what was reconciled.

## The bug

`QueryEditor` took `sql: string`, so a query's dialect brand died at the
prop boundary and the component re-branded whatever it was handed based
on a separately-passed `source`. Nothing tied the two together, which
meant nothing stopped Postgres SQL from reaching the analytics endpoint.

Explorer query drafts made it concrete. `explorer-query.ts` branded
**every** draft with `untrustedSql` regardless of source:

```ts
uncheckedSql: untrustedSql(sql)   // even for a logs draft
```

and the editor then re-branded that same text with `untrustedLogSql` at
run time for a logs draft — laundering a Postgres-branded value straight
through the boundary that `safe-analytics-sql.ts` exists to defend. The
brands are deliberately disjoint precisely so this can't happen; passing
plain strings around defeated it.

## The fix

Both carriers are now tagged by backend, so one `_tag` check narrows the
SQL brand and that backend's parameters together.

- **`ExplorerQueryDraft`** becomes `DatabaseQueryDraft |
LogsQueryDraft`, and `toDraft` is the single place a persisted string
re-enters the type system — branded for the backend its binding names.
The draft is rebuilt rather than mutated in place, since a backend
change changes which brand its SQL carries.
- **`QueryEditor`** takes one discriminated `query` prop instead of
`sql` + `source` + `rowLimit`. The tag picks both the brander at the
editor boundary and the execution endpoint, so the mismatch is no longer
expressible.
- The two `acceptUntrusted*` promotions stay **inlined** in the run
handler rather than factored into a shared helper, so each stays visible
next to the user gesture that authorizes it, per the safe-SQL model.
- **`rowLimit` moves onto the database member.** Logs execution has no
use for it — `applyAutoLimit` is Postgres-specific — so it no longer
sits on a shared type where it reads as meaningful for both.

## Local storage

Existing query drafts shape-mismatch and fall back to a database binding
via the existing `safeParse` guard — harmless, and notebooks are still
behind the `explorer` flag so there is no saved server content in play.

## Conflict resolution

`master` moved inside every file this PR touches. The type change is
applied on top of that work; nothing was reverted.

| Preserved from `master` | Where |
|---|---|
| zod parsing of persisted drafts (`persistedDraftsSchema`,
`persistedDraftSchema`) | `explorer-query.ts` |
| `MAX_PERSISTED_EXPLORER_QUERY_DRAFTS` cap, retaining
most-recently-updated | `explorer-query.ts` |
| debounced SQL persistence + `flushPendingPersistence`, immediate
write-through for rename/source | `explorer-query.ts` |
| `removeDraft` clearing pending timers | `explorer-query.ts` |
| `getQuerySourceBinding(cell)` and the four source-change branches,
incl. `database_identifier` / `time_range` propagation |
`QueryCell/index.tsx` |
| `restoredQueryKey` per `ref:id` and the `role="status"` loader |
`QueryTab.tsx` |
| `applyAutoLimit` relocated to `@/data/sql/utils` | `QueryEditor.tsx` |

Two adaptations were needed:

- `updateDraft` rebuilds the draft through `toDraft` instead of mutating
it in place — required, because the object's shape depends on its tag.
The debounced `persist` closure still re-reads `state.drafts[id]` at
fire time, so behavior is unchanged.
- Master's new test `falls back to the database source when persisted
source data is invalid` asserted `draft.source`, which the tagged union
replaces. Rewritten to assert the same intent against `_tag`.

**Dropped from this PR's original description:** it previously claimed
to fix a log cell always running against a synthesized default time
range. Master fixed that itself by adopting `getQuerySourceBinding`
(from #49072), so the claim no longer applies.

## Verification

Typecheck, Prettier, and the lint ratchet clean. 736 tests pass across
`state/`, the Explorer surfaces, notebooks, query sources, `data/sql`,
and the SQL editor — including master's new `QueryTab.test.tsx`,
`ExplorerQuerySourceMenu.test.tsx`,
`ExplorerQueryTabCoordinator.test.tsx`, and the five draft-store tests
added since this branch was cut.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
  - Improved Explorer query handling across database and logs backends.
- Preserved query text when switching backends while clearing
incompatible results.
  - Retained results when changing parameters within the same backend.
- Improved restoration of saved drafts, including fallback handling for
legacy or invalid sources.
- Added validation before executing edited SQL to help prevent invalid
requests.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-14 08:49:54 -04:00
Charis
0ed49231b7 refactor(studio): unify CellSource and the SQL editor's QuerySource into QuerySourceBinding (#49072)
Third of a stack. **Stacked on #49070** (which is stacked on #49069) —
review those first. Base retargets automatically as each merges.

Mechanical throughout; no behavior change.

## The problem

Three types described where a query runs, and no two agreed:

| | shape |
|---|---|
| `CellSource` (registry) | `{ id, type, parameters: { … } }` — `id` and
`type` always held the same literal |
| `QuerySource` (SQL editor) | `{ type: 'database' } \| { type: 'logs',
dateRange }` |
| notebook cells | flat per-backend fields, neither of the above |

Anything crossing between them needed a translation that dropped fields
on the way — which is how a notebook cell's replica selection had
nowhere to go.

## What changed

One `QuerySourceBinding`: a backend `_tag` with that backend's
parameters spread flat beside it, borrowed from the wire schema (#49069)
so the binding and the persisted cell agree by construction.

- **`QuerySource` is deleted.** `useRunSource` returns the shared
binding, so `runSource.type`/`dateRange` become `_tag`/`time_range`
across the SQL editor — that is most of the file count here.
- **`getQuerySourceBinding`** projects a notebook cell onto a binding;
**`toQuerySourceBinding`** does the same for any backend-tagged carrier.
Both overloaded so an already-narrowed caller gets the matching binding
back rather than the union, which keeps the result spreadable without
re-narrowing.
- **`ExplorerQuerySourceMenu`** drops its inline copy of the
custom-range and upgrade-prompt logic in favor of `useLogsCustomRange`,
which the SQL editor menu already used.

The registry keeps only what is genuinely runtime: endpoints, labels,
icons, availability, defaults. What a query *is* stays in the wire
schema.

## Verification

Typecheck, Prettier, and the lint ratchet clean. 405 tests pass across
the notebook schema, query sources, the logs components, the SQL editor,
and the Explorer surfaces.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Improvements**
* Updated query source handling across Explorer and SQL Editor for a
more consistent selection experience.
* Database and log sources now preserve identifiers and time ranges more
reliably when switching or editing queries.
* Source menus, labels, icons, validation, and query execution now
reflect the selected source more accurately.

* **Bug Fixes**
* Invalid or outdated saved source settings now safely fall back to a
database source.
* Improved log-source detection and time-range handling throughout query
editing and execution.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-14 15:09:29 +07:00
Joshen Lim
2f89014f74 Add logs cells (#49064)
## Context

Related to Explorer/Notebooks - adds the source selector for query cell
within a notebook

<img width="1108" height="648" alt="image"
src="https://github.com/user-attachments/assets/d1434197-3738-41b0-a8ef-1919c91181d9"
/>

<img width="1103" height="633" alt="image"
src="https://github.com/user-attachments/assets/97f8c6a3-629d-4a41-aab4-3fdc5e8b2c7e"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Added support for displaying log cells in the query editor.
  * Added switching between database and log query sources.
  * Log and database cells can display results as tables or charts.
  * Log queries support optional row limits.
  * Improved reliability when changing query settings.
  * Notebook query views now default to table display when unspecified.

* **Bug Fixes**
  * Log cells no longer appear blank or get omitted from notebook views.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-14 02:23:06 +07:00
Joshen Lim
93d9d80535 joshen/fe 4149 explorer support adding removing cells in notebook (#49037)
## Context

Related to Explorer/Notebooks - this PR adds the functionality to add /
remove cells

Separately - am thinking we can shift a lot of the "cell update" logic
into notebook-state, mainly so that each UI component doesn't need to be
aware of the notebook's `cells` but just its own cell.

I'll do it separately though to prevent bloating this PR, already left
comments where i think can be refactored

<img width="250" alt="image"
src="https://github.com/user-attachments/assets/91aae5f9-07b9-4327-8e21-8e9d71098aa6"
/>
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/677de208-5c52-4155-90c6-bc0879070693"
/>
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/17c3dae7-87bc-40bb-bfa0-15df101006ce"
/>
<img width="1091" height="262" alt="image"
src="https://github.com/user-attachments/assets/a09c3d23-696a-4b55-a1f8-4602e56a60dc"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## New Features
- Add query and Markdown cells directly within notebooks.
- Move, remove, and reorder cells using drag-and-drop or cell controls.
- Add cells from empty states and notebook toolbar actions.
- Edit Markdown cells, mark edits as complete, and see placeholders for
empty content.

## Improvements
- Cell controls and hover interactions are more consistent and
responsive.
- Moving cells is disabled at the top or bottom of a notebook.
- Sample cells now use standardized content and formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-14 00:17:29 +07:00
Saxon Fletcher
ace9422bfd refactor(studio): share Explorer query editor (#49041)
## Stack

Depends on #49027. Followed by #49038.

## Summary

- extract a controlled `QueryEditor` from the existing notebook query
cell
- reuse it from `QueryCell`, leaving notebook persistence and
sortable-block behavior in the adapter
- make table/chart result settings controlled so other query surfaces
can share them
- persist notebook SQL on editor blur and query execution

## To test

1. Open a notebook query cell, edit and rename it, then run the query
and confirm results appear.
2. Switch between table and chart results and confirm notebook
move/delete actions still work.

## Why

Notebooks, query tabs, and future chat tabs need consistent query
actions and result rendering without duplicating the notebook
implementation.

## Impact

This is primarily a refactor of the existing notebook query experience.
It introduces no new query-tab routes or source-selection behavior.

## Validation

- fresh non-incremental Studio TypeScript check
- focused NotebookEditor component tests

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a shared query editor with SQL editing, execution, validation,
visibility controls, editable titles, row limits, and loading/error
states.
* Added table and chart result views, including customizable bar and
line charts.
* Added support for switching display modes and updating chart settings.

* **Improvements**
  * Improved query result handling and display-setting updates.
  * Repositioned the logarithmic-scale tooltip for better visibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-13 17:59:30 +07:00
Joshen Lim
09894096e2 Add log scale support to query result chart (#49049)
## Context

Related to Explorer/Notebooks - Adds support for log scale in the charts
<img width="980" height="477" alt="image"
src="https://github.com/user-attachments/assets/b3764023-bd9a-4edd-92d4-1b61df93b97e"
/>


Prevents setting to log scale if y axis has yet to be selected, or if
the data set contains non positive values
<img width="393" height="188" alt="image"
src="https://github.com/user-attachments/assets/57695d9e-9724-47ed-aa2a-c104c16837b2"
/>
<img width="408" height="159" alt="image"
src="https://github.com/user-attachments/assets/2290bb69-0ddb-4449-afad-aabae6ace669"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
  - Added logarithmic Y-axis scaling for line and bar charts.
  - Added logarithmic tick formatting and appropriate chart bounds.
  - Added contextual guidance when logarithmic scaling is unavailable.

- **Bug Fixes**
- Automatically switches charts back to linear scaling when data
contains values that cannot support logarithmic scaling.
  - Prevented unnecessary stacking for single-series area charts.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-13 16:42:28 +07:00
Joshen Lim
d434c63bad joshen/fe 4150 explorer query cells result display settings (#49003)
## Context

Related to Explorer / Notebooks - this adds chart functionality for the
Query cells
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/4ea37c14-87dc-4c43-ba7f-cb9436085c81"
/>

Query results can be rendered as either bar or line chart - using the
chart packages from `ui-patterns`
[NOTE]: For design team reviewers - am patching the chart packages to be
agnostic to the `timestamp` property within the provided data set. Would
love to use this component from a consistency POV instead of the old
`BarChart` component we have.

Have intentionally omitted log scale functionality from this PR - will
have that separately 🙏

<img width="999" height="483" alt="image"
src="https://github.com/user-attachments/assets/14356ee4-c658-4fd1-90e0-17c38dac4822"
/>
<img width="988" height="478" alt="image"
src="https://github.com/user-attachments/assets/cd0ca088-9a03-4aa3-9884-17bc36d3cabf"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added chart views for notebook query results, including bar and line
charts.
- Added display settings for selecting X/Y columns, chart type, scale,
cumulative values, and label visibility.
  - Added configurable X-axis support for charts.
  - Display preferences are saved with each notebook cell.

- **Improvements**
  - New database cells default to table view.
  - Chart results better handle varied data types.
- Empty results and incomplete chart settings now display clear
placeholders.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-13 10:09:54 +07:00
Joshen Lim
77c5a0b9d9 Joshen/fe 4077 explorer query cells (#48989)
## Context

Related to Explorer / Notebooks - adds a barebones query cell that
minimally can run SQL queries + render results

The intention is to migrate the components used in the SQL Editor into
this new Query cell since all the functionality is very similar, but the
SQL Editor component is tightly coupled to the SQL Editor valtio store.
So we'll be duplicating a bit of UI for now - which will also make
deprecating the SQL Editor eventually a bit easier by just deleting them

Have deliberately omitted a lot of details for now just to keep the PRs
small, so will be continuing to build out the QueryCell's functionality
in subsequent PRs. This includes
- Source selector
- Data display (Table / Chart)
- Autolimit logic

Other changes also includes
- Updating NotebookEditor to use the new Explorer UI components that
Saxon introduced

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/d709f6f1-f6cc-4e6a-babd-f5b68bba2a55"
/>
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/a286ceca-ac84-4fbd-afd5-b24f940e2e29"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added notebook database cells for writing, editing, and running SQL
queries.
* Added query result displays with loading, empty, error, row-limit, and
result states.
  * Added editable notebook titles with save and cancel controls.
  * New notebooks can start with customizable Markdown and SQL cells.
* Added helpful SQL error actions, including copying messages, database
connection guidance, and AI Assistant support where available.

* **Improvements**
* Improved notebook spacing, section layout, toolbar tooltips, and
empty-result presentation.
  * Markdown changes now save automatically through the notebook editor.
  * Improved drag-and-drop controls and query visibility management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-13 08:44:27 +07:00