mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
docs/monitoring
25
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 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 --> |
||
|
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 --> |
||
|
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 --> |
||
|
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> |
||
|
Charis
|
c0e109f662 |
refactor(studio): borrow the wire schema's time range in the query-source registry (#49070)
Second of a stack. **Stacked on #49069** — review that one first; this PR's diff only makes sense on top of it. Base will retarget to `master` automatically when #49069 merges. Net `-72` lines. No behavior change beyond the one noted at the bottom. ## The problem The query-source registry carried its own `LogTimeRange` type and `logTimeRangeSchema`, which had drifted from the notebook wire schema's copy in four ways: | | wire schema | registry | |---|---|---| | discriminant | `_tag: 'relative_time_range'` | `type: 'relative'` | | absolute bounds | `start` / `end` | `from` / `to` | | relative units | minute…year | minute, hour, day | | validation | none | positive int, end-after-start | Two definitions of one concept, neither convertible to the other without a lossy mapping — and the notebook query cell was papering over it by discarding a log cell's persisted range and substituting a default. ## What changed #49069 moved the validations onto the wire schema's `timeRangeSchema` and exported it. This PR deletes the registry's copy and points every consumer at `TimeRange`. The registry keeps what is genuinely runtime: endpoints, labels, availability, defaults. The field renames ripple mechanically through the logs date-picker helpers, the time-range submenu, `useLogsCustomRange`, the SQL editor's session state, and their tests. Coverage for the absolute-range and unit rules moved to `notebook-schema.test.ts` in #49069, alongside the schema that now owns them. `ExplorerQuerySourceMenu` also drops its hand-rolled custom-range construction in favor of `customDateRangeToLogTimeRange`, which already existed and does the same clamping. ## One behavior change `logTimeRangeToDatePickerValue` now renders a range whose unit has no picker preset (week, month, year — allowed by the wire schema, not offered in the UI) as a resolved absolute range, instead of trying and failing to build a helper for it. Previously unreachable, since the registry's narrower unit set made those ranges unrepresentable. ## Verification Typecheck, Prettier, and the lint ratchet clean. 401 tests pass across the notebook schema, query sources, the logs source components, the SQL editor, and the Explorer surfaces. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved log time-range handling across Explorer and SQL Editor. * Custom date ranges now display and resolve correctly, including clamping invalid ranges. * Unsupported relative time units are converted to compatible absolute date-picker values. * **Refactor** * Standardized log queries on a shared time-range format for more consistent validation and behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Saxon Fletcher
|
39c3960215 |
fix(studio): harden Explorer query persistence (#49039)
<img width="1690" height="1034" alt="image" src="https://github.com/user-attachments/assets/2dc5b10b-8e64-413b-861e-8b0b62e2d880" /> ## Summary - debounce draft persistence and flush pending edits when the page exits - validate untrusted local storage with Zod, recover from malformed entries, and retain the 50 most recently updated drafts - harden route restoration, recent-item routing, close confirmation, and local cleanup - disable execution while project or replica data is resolving and fail closed for missing replicas - use an HTTP-safe UUID generator for self-hosted Studio - adopt the upstream Explorer toolbar title API - expand component and state coverage for persistence and execution behavior ## To test 1. Open Explorer, select **Run SQL**, then enter SQL and rename the query. 2. Reload the page and confirm the draft is restored; close its tab and confirm it is discarded after the prompt. ## Why This layer makes local-only Explorer drafts resilient to rapid edits, reloads, stale browser data, and tab lifecycle edge cases. ## Impact Queries remain local-only, and closing their tabs discards them after confirmation. Save-as-notebook functionality remains intentionally out of scope. ## Validation - fresh non-incremental Studio TypeScript check - 68 Vitest tests pass across Explorer, query sources, tabs layout, and query/tab state - Studio ESLint ratchet and Prettier check both clean <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Explorer query drafts now save automatically and restore reliably across navigation, tab closures, page exits, and visibility changes. - Recent query items now open directly to their associated Explorer query. - Logs time-range selections are handled consistently, including custom ranges and preset matching. - **Bug Fixes** - Prevented stale query loading states when switching between queries. - Improved handling of invalid or outdated saved drafts. - Limited saved drafts to the 50 most recently updated queries. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
67d4fed40d |
Joshenlim/fe 4157 explorer migrate results component into explorer (#49066)
## Context Related to Notebooks/Explorers - this one's just shifting files from the SQLEditor into more generic folders from a file organization POV, such that files under the Explorer folder have no dependency on files within the SQLEditor folder Mainly - UtilityTabResults.utils: `getSqlErrorLines` - Moved into `data/sql/utils.ts` - SQLEditor.utils: `applyAutoLimit`, `getSqlErrorLines`, `trimTrailingSemicolons` - Moved into `data/sql/utils.ts` - SQLEditor/UtilityPanel: `ResultCell`, `Results`, `CellDetailPanel` - Moved into `components/ui/DataGridResults` - Also shifted corresponding tests over here - Also addressed some `any` type casts ## To test - Just need to ensure that the SQL Editor still works as expected <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized query results across the Studio with a shared data grid. * Improved result-table formatting, column sizing, clipboard handling, and large-value display. * Added safer automatic row limits for eligible SQL queries. * Centralized SQL error display and formatting utilities. * **Refactor** * Improved type safety for query rows and cell values. * **Tests** * Added comprehensive coverage for result-grid and SQL utility behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon FletcherandClaude Opus 5
|
fd8d213135 |
feat: add Explorer chat discovery and controls (#49032)
<img width="1693" height="1038" alt="image" src="https://github.com/user-attachments/assets/9ef52446-c517-4ea9-ada6-ac6dc57c8af4" /> ## Summary - add an Explorer-specific chat toolbar with rename, chat ID, permission, and branching controls - list searchable non-support chats in Explorer with reactive updates and safe rehydrated-date sorting - add chat creation entry points to Explorer home and navigation menus - route chat recent items correctly and show chat icons across shared tab surfaces - make the assistant sidebar expand action open the active chat in Explorer This is PR 3 of 3 and is stacked on #49031. Review #48973 first, then #49031, then this PR. Compared with its base, this PR contains only discovery, toolbar, and cross-surface integration work. ## To Test - visit /explorer - Create a new chat either via home tab chat input OR the chats sidebar - Validate chats show up in sidebar - Validate chat conversation works - Close the chat tab and open a chat via sidebar - Change permission settings via the chat tab toolbar and verify it persists ## Test plan - `mise exec node@22 -- pnpm --dir apps/studio exec tsc --noEmit` - focused Vitest suite: 4 files / 5 tests covering reactive chat lists, navigation filtering and sorting, recent-item routing, and sidebar handoff - ESLint on changed TypeScript files - Prettier check on changed source files <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added chat creation from the Explorer home, navigation, and new-tab menu. - Added an Explorer chat toolbar with editable names, ID copying, permissions, shortcuts, and metadata warnings. - Added searchable chat history with sorting, active-chat highlighting, and clear empty states. - Chats can now open directly in Explorer from the AI Assistant panel. - Recent items now link correctly to chats and notebooks. - **Bug Fixes** - Improved chat list updates after creation, deletion, and restored sessions. - Added safer handling for chats without update timestamps. - **Tests** - Expanded coverage for chat navigation, creation, metadata warnings, shortcuts, and recent-item links. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Saxon FletcherandClaude Opus 5
|
85db94762c |
feat: add routed assistant chat tabs to Explorer (#49031)
<img width="1695" height="1042" alt="image" src="https://github.com/user-attachments/assets/b02e64ff-32ac-4aee-bda5-00b56f3a29e5" /> ## Summary - add routed Explorer chat pages backed by explicit assistant chat IDs - wait for persisted assistant state before creating chats so cold-load creation is not overwritten - register chat tabs and keep tab labels, navigation, close behavior, and missing-chat cleanup in sync - create and branch Explorer chats without changing the assistant sidebar selection - support both Next.js and TanStack Router paths This is PR 2 of 3 and is stacked on #48973. Review and merge #48973 first. The Explorer discovery, toolbar, and cross-surface entry points follow in #49032. This PR focuses purely on setting up chat tab types, routes and assistant conversation. ## To Test - Create a new assistant chat via the assistant sidebar, send a message etc - Copy the chat id - Visit /explorer/chat/[id] - Verify chat shows up, you can send more messages, chat is synced across tab and sidebar - Close the tab ## Test plan - `mise exec node@22 -- pnpm --dir apps/studio exec tsc --noEmit` - focused Vitest suite: 4 files / 30 tests covering assistant hydration, chat creation, routed chat rendering, and tab lifecycle - ESLint on changed TypeScript files - Prettier check on changed source files <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Explorer chat pages with support for opening, selecting, and branching chats. * Added chat tabs, stable navigation, chat icons, and fallback behavior when tabs are closed. * Added chat creation that waits for assistant state to finish loading. * **Bug Fixes** * Removed tabs for deleted or unavailable chats. * Improved editor tab navigation and history clearing behavior. * **Tests** * Added coverage for chat routing, tab management, chat creation, and assistant-state loading. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
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 --> |
||
|
Joshen Lim
|
fc3f6aaea8 |
Add source selector for explorer query tab (#49063)
## Context This is just pulling out the relevant changes from https://github.com/supabase/supabase/pull/49028 as I might have messed up the stack while making changes down the PRs 🙏 Builds on the Query Tab in the Explorer UI, adds the source selector component to run either a database query or a logs query - will subsequently be looking into have the source selector component in the QueryCell as well (within notebooks) <img width="1095" height="594" alt="image" src="https://github.com/user-attachments/assets/ab6e8d91-aed3-4845-9777-acbd7a3a7cb1" /> <img width="1086" height="667" alt="image" src="https://github.com/user-attachments/assets/75d99063-755d-4ba6-a128-7ddcbbc9f161" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added query-source selection for Explorer and notebook queries. - Supports log queries, database selection, and read-replica connections. - Added validation for custom log time ranges and retention limits, with upgrade guidance when applicable. - Query source choices are saved and restored across sessions. - Changing sources clears previous results to prevent stale data. - **Bug Fixes** - Improved handling of unavailable log querying and missing database connections. - Legacy saved queries now fall back safely to the default database source. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
Saxon Fletcher
|
75d16f360f |
feat(studio): add Explorer query tabs (#49038)
<img width="1693" height="1037" alt="image" src="https://github.com/user-attachments/assets/51fdf618-f06e-45ca-bf30-e1307dfbb372" /> ## Stack Depends on #49041. Followed by #49028. ## Summary - add a dedicated ad-hoc query tab type and route under Explorer - connect query tabs to the shared `QueryEditor` through a `QueryTab` lifecycle adapter - add local query draft/result state and restore query tabs from their routes - confirm before closing populated local-only drafts and clean up their state on close ## To test 1. Open Explorer, select **Run SQL**, enter `select 1`, and run the query. 2. Rename the query, reload the page, then close the tab and confirm the discard prompt appears. ## Why Explorer needs a lightweight place to run SQL without creating a snippet. This layer adds the query-tab lifecycle on top of the shared editor foundation. ## Impact Queries in this layer run against the selected project's primary database. Drafts are local to the browser and are discarded when their tabs are closed. ## Validation - fresh non-incremental Studio TypeScript check - 22 focused tests across query draft state, tab state, and notebook tab registration <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added support for creating, opening, editing, and running SQL queries in Explorer. * Added project-scoped persistence for query drafts and results. * Added dedicated query routes, query icons, and query tabs. * Added unsaved-changes warnings when closing query tabs. * Added a pinned Explorer Home tab and “New query” option. * Improved notebook tab registration and editor tab organization. * **Bug Fixes** * Improved tab navigation, closing behavior, and layout. * **Tests** * Added coverage for query persistence, cleanup, restoration, and tab navigation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
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> |
||
|
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 --> |
||
|
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 --> |
||
|
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 --> |
||
|
Saxon Fletcher
|
7c4872ad32 |
Add Studio ExplorerQuery shell (#48926)
## Summary Adds the Studio-owned `ExplorerQuery` shell used by notebooks, SQL snippets, dedicated query tabs, and assistant query blocks within Explorer. - provides framed embedded and full-height viewport roots - provides composable editor, results, and footer layout regions - keeps result content responsible for its own scrolling while the results region fills remaining height - remains presentational: query models, execution, source resolution, persistence, and result rendering stay external - expands the project-local Explorer agent skill with composition and sizing guidance - adds focused Studio component tests All files are scoped to `apps/studio`; this PR no longer changes `ui-patterns` or the design-system app. ## Stack - Base: #48925 - Next: #48961 - This PR targets `chore/toolbar-component`, so its review diff contains only the query shell layer. ## Validation - `pnpm --filter studio exec vitest run components/interfaces/Explorer/ExplorerQuery/ExplorerQuery.test.tsx components/interfaces/Explorer/ExplorerToolbar/ExplorerToolbar.test.tsx` — 6 tests passed - `pnpm --filter studio typecheck` - Prettier - `git diff --check` |
||
|
Saxon Fletcher
|
fb80d8cf86 |
Add Studio Explorer toolbar (#48925)
## Summary Adds the Studio-owned `ExplorerToolbar` composition used by Explorer notebooks, chats, SQL snippets, query cells, and tabs. - provides icon, title, actions, and compact action-button slots - follows Studio's 40px header sizing with a `--header-height` fallback - keeps resource-specific state and behavior in the consuming Explorer surface - adds focused Studio component tests - adds project-local agent guidance at `apps/studio/.claude/skills/explorer/SKILL.md` These components are intentionally scoped to Studio under `apps/studio/components/interfaces/Explorer`; this PR no longer changes `ui-patterns` or the design-system app. ## Stack - Base: `master` - Next: #48926 - This is the first PR in the Explorer query component stack. ## Validation - `pnpm --filter studio exec vitest run components/interfaces/Explorer/ExplorerToolbar/ExplorerToolbar.test.tsx` — 3 tests passed - `pnpm --filter studio typecheck` - Prettier - `git diff --check` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added shared Explorer toolbar components for icons, titles, actions, custom controls, and compact buttons. * Added accessibility defaults, configurable toolbar sizing, ref forwarding, and native property support. * Added documentation covering Explorer component usage, composition, sizing, actions, state ownership, and extensions. * **Tests** * Added comprehensive coverage for toolbar composition, styling, accessibility, refs, and configurable behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
b648db233b |
joshen/fe 4113 explorer markdown cells (#48846)
## Context More groundwork for the Explorer - this PR introduces the Markdown cells and some basic (non data persisting) editing Markdown cells will save either on - Save button click - Losing focus on the code editor Hitting esc will cancel the changes <img width="1387" height="674" alt="image" src="https://github.com/user-attachments/assets/f0614b37-7a11-404f-9940-8bcd4de25c57" /> <img width="1087" height="516" alt="image" src="https://github.com/user-attachments/assets/0a104168-2001-4ef7-934a-7e864956b3cb" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added editable Markdown cells to notebooks, with save and cancel controls. * Added drag-and-drop reordering for notebook cells, including keyboard support. * New notebooks now include sample Markdown content to help users get started. * **Improvements** * Improved drag-handle placement and consistency across sortable sections. * Updated notebook empty and populated states to reflect the current cell content. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
0111aa371b |
ref(studio): converge notebook UI types with canonical content schema (#48905)
## Summary - Joshen's `state/notebooks/types.ts` (Explorer/notebook editor UI) redefined its own `TimeRange`, cell union, and `NotebookContent` shapes, duplicating the canonical schema from `data/content/notebooks/notebook-schema.ts` (#48813, #48815). - Points `Notebook.content` and `notebooksState.updateCells` at the canonical `Notebooks.Content` / `Notebooks.Cell` types (via `@/types`) instead, and fixes the handful of call sites that constructed notebook content by hand to match the real wire shape: `schema_version: 1` (not `'1.0'`) and `_tag`-discriminated cells (e.g. `{ _tag: 'markdown_cell', id, text }` instead of `{ type: 'markdown', content }`). - No behavioral changes — Joshen's state management, editor component, and hooks are untouched aside from the type-level fixes needed to compile against the canonical schema. ## Test plan - [x] `pnpm exec tsc --noEmit` — no new errors - [x] `pnpm exec vitest run state/notebooks/notebooks-state.test.ts components/interfaces/Explorer/__tests__/NotebookEditor.test.tsx` — 8/8 passing - [x] `pnpm exec eslint` on changed files — clean - [x] `pnpm exec prettier --check` on changed files — clean <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Updated notebook content handling to use the current schema version format. * Improved compatibility for markdown cells, including their identifiers and text. * Standardized notebook content and cell updates for more consistent behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
6c414e363d |
Initialize notebook editor page (#48842)
## Context More groundwork for the Explorer - this PR initializes the Notebook editor page which you can access with the "New notebook" CTA As usual nothing functional just yet, but this PR also addresses some UI functionality - Creating more than 1 notebook will open multiple tabs (it wasn't previously) - Swapping between notebooks will update the URL (wasn't previously as well) Will probably start looking into the cells next, starting with MarkdownCell followed by QueryCell <img width="1390" height="894" alt="image" src="https://github.com/user-attachments/assets/a467cdb4-f99f-43db-8106-c15c26c1bfbf" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added notebook creation actions from the Explorer home and navigation areas. * Introduced a full notebook editor with title editing, rename support, and Analyze, Run, and Save controls. * Added options to create query or Markdown cells in empty notebooks. * Notebook tabs now open the corresponding notebook in the project Explorer. * **Bug Fixes** * Improved Explorer layout sizing and notebook tab navigation behavior. * Improved notebook tab labels and editing behavior, including cancellation with Escape and submission with Enter or blur. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
3a383c87c7 |
Initialize notebooks store (#48801)
## Context More groundwork for the Explorer - this one's focused on initializing the valtio store for managing notebooks Store architecture will follow closely with the existing sql-editor-store No data persistence yet, but can test creating a new notebook <img width="195" height="143" alt="image" src="https://github.com/user-attachments/assets/8656fb5b-3a8e-4f71-b2ce-d2f34ca9b552" /> Which should open a placeholder page <img width="1387" height="527" alt="image" src="https://github.com/user-attachments/assets/4a81b1ae-a740-40e6-9d33-29fa4f83b541" /> Closing the notebook brings you back to the explorer home page <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added support for creating and opening project notebooks from the Explorer. * Added notebook tabs alongside existing entity and SQL tabs. * Added notebook management, including loading, renaming, removing, editing cells, and tracking unsaved changes. * Added support for SQL, logs, and Markdown notebook cells. * Added dedicated notebook routes and an initial notebook editor view. * Added notebook icons throughout the Explorer interface. * **Documentation** * Documented session-scoped notebook state for query results and row limits. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
8618991b6f |
Initialize explorer home page (#48790)
## Context More groundwork for the Explorer - initializing the home page Note that nothing here is functional, all just visual still <img width="1387" height="960" alt="image" src="https://github.com/user-attachments/assets/d4967578-edbd-476f-8150-d9d5e9d66666" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a new Explorer landing page with an assistant chat form. * Added quick actions for creating notebooks and SQL work. * Added notebook and chat template cards for faster project exploration. * **Improvements** * Explorer content now fills the available page height. * Assistant send button styling now reflects whether submission is available. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
a7671019a8 |
Scaffold the explorer layout (#48740)
## Context Resolves FE-4074 Just adds scaffolding for the explorer UI - no data fetching yet. Initializes the page + side nav, based off Saxon's POC in `poc/explorer-prototype` <img width="1389" height="500" alt="image" src="https://github.com/user-attachments/assets/8f293992-97d9-403e-91d6-2e104cd20eb5" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## New Features - Added a project Explorer page accessible from `/project/:ref/explorer`. - Added navigation for browsing notebooks and chats. - Added search fields, back navigation, animated transitions, and empty states for Explorer sections. - Added a conditional Explorer link to the SQL Editor menu when enabled. ## Documentation - Marked the Explorer route migration as complete in the migration checklist. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |