Skip to content

feat: add kepler-query example combining map and SQL editor side by side - #427

Closed
jakubsatka wants to merge 1 commit into
sqlrooms:mainfrom
jakubsatka:feat/kepler-query-example
Closed

jakubsatka wants to merge 1 commit into
sqlrooms:mainfrom
jakubsatka:feat/kepler-query-example

Conversation

@jakubsatka

@jakubsatka jakubsatka commented Mar 11, 2026 •

Copy link
Copy Markdown

feat: kepler-query example - map + SQL editor side by side

Summary:

  • New examples/kepler-query/ combining Kepler.gl map + inline SQL editor on one screen
  • Layout: 25% data sidebar | 60% Kepler map | 40% SQL editor (side by side)
  • File uploads load into DuckDB only (no auto-add to map)
  • Earthquakes dataset pre-loaded on startup

Test plan:

  • Run cd examples/kepler-query && pnpm dev, open http://localhost:5173
  • Verify Kepler map loads with earthquakes visualized
  • Verify SQL editor is visible side by side with the map
  • Run SELECT * FROM earthquakes LIMIT 10 in SQL editor
  • Drop a file on Data panel — verify it's queryable in SQL editor

Also: uv is now installed at ~/.local/bin/uv which fixed the pre-existing Python test failures in the pre-push hook.

Summary by CodeRabbit

  • New Features
    • Added kepler-query example application featuring Kepler.gl map visualization with data import, SQL query execution, and map management (create, rename, delete, export).
    • Includes side panels for layer, filter, basemap, and interaction configuration.
    • Supports light and dark theme switching.

New example combining Kepler.gl geospatial map with an inline SQL editor
in a side-by-side layout. File uploads load into DuckDB only (no auto-add
to map). Earthquakes dataset pre-loaded and visualized on startup.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@coderabbitai

coderabbitai Bot commented Mar 11, 2026 •

Copy link
Copy Markdown
Contributor

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Adds a new example application "kepler-query" demonstrating integration of Kepler maps with SQL query capabilities. Includes project configuration files, React components for map management and SQL editing, styling, store setup combining multiple slices, and build configuration for a monorepo environment.

Changes

Cohort / File(s) Summary
Project Configuration
examples/kepler-query/package.json, examples/kepler-query/eslint.config.js
Defines project metadata, scripts, and dependencies; configures ESLint with React hooks/refresh plugins targeting TypeScript files.
TypeScript & Build Config
examples/kepler-query/tsconfig.json, examples/kepler-query/tsconfig.app.json, examples/kepler-query/tsconfig.node.json, examples/kepler-query/vite.config.ts
Establishes TypeScript project references, strict compiler options, bundler-friendly settings, and Vite configuration with React/Tailwind plugins. Includes complex alias logic to resolve deck.gl/luma.gl v8 packages in monorepo and path mappings for @deck.gl/core typings.
Entry Points & Environment
examples/kepler-query/index.html, examples/kepler-query/src/vite-env.d.ts, examples/kepler-query/src/main.tsx
Provides static HTML root, Vite client type declarations, and React entry point with ThemeProvider, StrictMode, and Monaco loader configuration.
Core Application
examples/kepler-query/src/room.tsx, examples/kepler-query/src/store.ts
Defines main Room component wrapping RoomShell with CommandPalette and ThemeSwitch. Creates composite RoomStore merging RoomShell, Kepler, and SqlEditor slices with earthquakes dataset initialization and addFile method for loading tabular data.
UI Components
examples/kepler-query/src/components/DataPanel.tsx, examples/kepler-query/src/components/KeplerMapsContainer.tsx, examples/kepler-query/src/components/KeplerSidePanels.tsx, examples/kepler-query/src/components/SqlEditorPanel.tsx
DataPanel enables file uploads and derives table names; KeplerMapsContainer renders tabbed map interface with export/rename/delete dialogs; KeplerSidePanels wraps four manager components for layers/filters/basemaps/interactions; SqlEditorPanel composes query editor and result panel with table creation modal.
Styling
examples/kepler-query/src/index.css
Imports Tailwind and UI preset, defines comprehensive CSS custom properties for light/dark theme variables (backgrounds, colors, borders, radii).

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Room as Room<br/>(App Root)
    participant Store as RoomStore
    participant DataPanel
    participant Kepler as Kepler<br/>Maps
    participant SqlEditor as SQL<br/>Editor
    
    User->>Room: Load application
    Room->>Store: Initialize store<br/>(with earthquakes data)
    Store->>Kepler: Setup Kepler slice
    Store->>SqlEditor: Setup SQL Editor slice
    
    User->>DataPanel: Drop file
    DataPanel->>Store: addFile(file)
    Store->>Store: Load file via connector<br/>Refresh schemas
    DataPanel->>User: Show success toast
    
    User->>SqlEditor: Write/execute query
    SqlEditor->>Store: Execute query
    Store->>Store: Get last query result
    
    User->>Kepler: View maps<br/>with results
    Kepler->>User: Render map layers<br/>with data
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 Hoppy hops through Kepler's gleam,
Maps and queries live the dream,
SQL dance meets mapping's art,
Each component plays its part,
Config perfect, types align—
This example's sure to shine! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: a new example combining Kepler.gl maps with a SQL editor displayed side by side.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@jakubsatka jakubsatka closed this Mar 11, 2026
@jakubsatka
jakubsatka deleted the feat/kepler-query-example branch March 11, 2026 05:42
@jakubsatka
jakubsatka restored the feat/kepler-query-example branch March 11, 2026 05:49
@jakubsatka
jakubsatka deleted the feat/kepler-query-example branch March 11, 2026 05:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant