Resolve production issues, fast. An open source observability platform unifying session replays, logs, metrics, traces and errors powered by ClickHouse and OpenTelemetry.
Find a file
Elizabet Oliveira 6f612e4a03
Refactor search input: unified SearchWhereInput and SQL editor expand-on-focus (#1726)
## Summary

Unifies the "WHERE" / search input experience across the app with a new **SearchWhereInput** component, adds **expand-on-focus** behavior for the SQL and Lucene inputs, introduces **keyboard shortcuts** to focus search, and **persists the chosen WHERE language** (SQL vs Lucene) in localStorage so it is reused as the default across pages.

Fix #1663
Fix #1666

## What's in this PR

### New component: SearchWhereInput

- **Single entry point** for "WHERE" / search that supports:
  - **SQL** (CodeMirror) and **Lucene** (textarea + autocomplete) via `InputLanguageSwitch`
  - Optional **multiline** SQL with expand-on-focus
  - Optional **hotkey** (`/` or `s`) to focus the input, with an optional hint in the UI
- Props: `showLabel`, `label`, `allowMultiline`, `enableHotkey`, `width` / `maxWidth`, `sqlPlaceholder` / `lucenePlaceholder`, `sqlQueryHistoryType` / `luceneQueryHistoryType`, `additionalSuggestions`, plus `TableConnectionChoice` and `UseControllerProps` for react-hook-form.
- Used in:
  - **DBSearchPage** (main search)
  - **DBDashboardPage** (dashboard filters)
  - **ChartSeriesEditorComponent** (DBEditTimeChartForm – series WHERE)
  - **SessionsPage** / **SessionSubpanel**
  - **ContextSidePanel** (log side panel surrounding context)
  - **DashboardFiltersModal**, **DBTracePanel**, **DBTraceWaterfallChart**, **DBSearchHeatmapChart**, **KubernetesFilters**, **Sources/SourceForm** (import path updates)

### Persisted WHERE language (localStorage)

- **SearchWhereInput** saves the user's chosen query language (SQL or Lucene) in localStorage under `hdx-search-where-language` whenever they switch languages.
- **getStoredLanguage()** is exported and used when building form and URL defaults so the same preference is applied when no value is set.
- Pages that default to the stored language when none is set:
  - **DBSearchPage** (main search form, save/reset saved search, new search)
  - **DBDashboardPage** (global WHERE query param and form default)
  - **ServicesDashboardPage** (WHERE form default and chart config)
  - **SessionsPage** (WHERE form default)
  - **DBSearchPageAlertModal** (alert config default)
  - **ContextSidePanel** (WHERE form default, falls back through `originalLanguage → getStoredLanguage() → 'lucene'`)
- Result: choosing SQL or Lucene on one page carries over as the default on others and when creating new searches, saved searches, or alerts.

### Expand on focus

- **SQLInlineEditor** (CodeMirror):
  - When `allowMultiline` is true, the editor expands on focus and collapses when blurred.
  - Collapsed state uses a **fade** at the bottom so text isn't hard-cut.
  - Expanded state uses full height and appropriate border radius (coordinated with `SearchWhereInput` wrapper).
- **AutocompleteInput** (Lucene):
  - Same idea: single-line when unfocused, expand when focused, with **collapse fade** when not focused.
  - `data-expanded="true"` on the wrapper for styling (e.g. rounded corners).

### Keyboard shortcuts

- **`/`** or **`s`** focus the active search input (SQL CodeMirror or Lucene textarea) when `enableHotkey` is true.
- Implemented in `SearchWhereInput` (for the wrapper), `SQLInlineEditor`, and `SearchInputV2` via `useHotkeys` from `react-hotkeys-hook`.
- Optional hint in the UI: "Press / or s to focus search" with `<Kbd>/</Kbd>`.

### ContextSidePanel layout

- Replaced the split `WhereLanguageControlled` / `SQLInlineEditorControlled` / `SearchInputV2` setup with a single `SearchWhereInput` at `size="xs"`.
- Layout uses a simple `<Group justify="space-between">` — SearchWhereInput's `.root` uses `flex: 1 1 0%` with `min-width: 0`, so it fills remaining space after siblings claim their natural width and shrinks gracefully without forcing wrapping. When hidden (non-Custom context), the two `SegmentedControl` components naturally spread to opposite ends via `space-between`.
- `whereLanguage` form default falls back through `originalLanguage → getStoredLanguage() → 'lucene'`.

### Code organization

- **SearchInput components** moved under `packages/app/src/components/SearchInput/`:
  - `AutocompleteInput.tsx` + `AutocompleteInput.module.scss`
  - `InputLanguageSwitch.tsx`
  - `SQLInlineEditor.tsx` + `SQLInlineEditor.module.scss`
  - `SearchInputV2.tsx` + `SearchInputV2.module.scss`
  - `SearchWhereInput.tsx` + `SearchWhereInput.module.scss`
  - `index.ts` (barrel exports)
- Removed legacy top-level `AutocompleteInput.tsx` and `InputLanguageSwitch.tsx` from `src/` and `src/components/`.
- **SearchWhereInput** replaces direct use of `SQLInlineEditor` + `SearchInputV2` where a unified SQL/Lucene control is needed.

### Styling & theming

- **SearchWhereInput**: Uses `flex: 1 1 0%` with `min-width: 0` so it fills remaining space after siblings claim their natural width — siblings no longer need `flexShrink: 0`.
- **SearchWhereInput**: Size-variant classes (`.sizeXs` / `.sizeSm`) on `.inputWrapper` and `.languageSwitch` for explicit per-size height and textarea min-height control. `!important` on textarea `min-height` overrides `react-textarea-autosize` inline styles.
- **SearchWhereInput**: Wrapper and expanded-state border radius so the expanded SQL/Lucene input aligns with the layout.
- **SQLInlineEditor**: `.expanded` / `.collapsed` / `.collapseFade` in `SQLInlineEditor.module.scss`.
- **AutocompleteInput**: `.focused` / `.collapseFade` in `AutocompleteInput.module.scss`.
- **Theme tokens**: Small updates in `hyperdx` and `clickstack` theme tokens / Mantine theme for consistency.

### Tests & E2E

- **Unit**: `SearchWhereInput.test.tsx` for language switch, placeholders, labels, `showLabel`, `width`/`maxWidth`, submit.
- **Unit**: `DBEditTimeChartForm.test.tsx` mock path updates for new SearchInput location.
- **E2E**: `multiline.spec.ts` – refined multiline input locator, autosize/expand verification, dropdown wait states, Query language selection.
- **E2E**: `SearchPage` page object and related session specs adjusted for new structure.

### Storybook

- **SearchWhereInput** stories: Default (Lucene), SQL mode, custom width, no label, single-line SQL.
- **SQLInlineEditor** stories moved under `components/SearchInput/`.

## How to test

1. **DBSearchPage**: Toggle SQL/Lucene, use `/` or `s` to focus, try multiline SQL (expand on focus, collapse on blur).
2. **DB Dashboard**: Edit a chart series WHERE clause via SearchWhereInput; same hotkey and expand behavior.
3. **Sessions**: Use the search/WHERE input and confirm language switch and focus behavior.
4. **ContextSidePanel**: Open a log side panel, switch to "Custom" context — verify the SearchWhereInput appears inline between the two segmented controls in one row; switch away from Custom and verify the controls spread with space-between.
5. **Persisted language**: Switch to SQL on DBSearchPage, then open Sessions or a DB Dashboard — WHERE should default to SQL; repeat with Lucene and confirm it sticks across pages and new saved searches/alerts.
6. **Storybook**: Open "Components/SearchWhereInput" and "Components/SQLInlineEditor" and check layout, expand/collapse, and hotkey hint.

## Checklist

- [x] SearchWhereInput supports SQL and Lucene with language switch
- [x] SQL editor and Lucene input expand on focus when multiline is enabled
- [x] Collapse fade applied when collapsed
- [x] Keyboard shortcuts `/` and `s` focus the active input where enabled
- [x] WHERE language (SQL/Lucene) persisted in localStorage and used as default across search, dashboards, sessions, saved searches, and alerts
- [x] SearchInput components reorganized under `components/SearchInput/`
- [x] ContextSidePanel migrated to SearchWhereInput with responsive single-row layout
- [x] Unit tests and E2E updated; new tests for SearchWhereInput
- [x] Stories added/updated for SearchWhereInput and SQLInlineEditor
2026-02-27 13:41:57 +00:00
.changeset fix: apply correct color-scheme for light and dark modes so scrollbars match the active theme (#1818) 2026-02-27 13:17:59 +00:00
.github chore: allow claude and claudebot to trigger review workflow (#1800) 2026-02-25 14:31:26 +00:00
.husky chore: Add automatic api doc generation (#1397) 2025-11-21 21:14:02 +00:00
.vex build(deps): add security resolutions for vulnerable npm packages (#1740) 2026-02-26 02:14:24 +00:00
.vscode add back linting prettier via eslint (#1463) 2025-12-11 12:00:31 -07:00
.yarn/releases feat: move more codes 2024-11-21 21:44:33 -08:00
agent_docs Standardize Button/ActionIcon variants and enforce via ESLint (#1610) 2026-01-16 14:42:16 +00:00
docker build(deps): add security resolutions for vulnerable npm packages (#1740) 2026-02-26 02:14:24 +00:00
packages Refactor search input: unified SearchWhereInput and SQL editor expand-on-focus (#1726) 2026-02-27 13:41:57 +00:00
proxy feat: add subpath config (#1236) 2025-10-17 14:43:58 -07:00
scripts chore: Use local clickhouse instance for playwright tests (#1711) 2026-02-13 15:43:12 +00:00
smoke-tests/otel-collector fix(otel-collector): improve log level extraction with word boundaries in regex (#1747) 2026-02-18 22:16:07 +00:00
.env Release HyperDX (#1777) 2026-02-24 06:21:31 +01:00
.gitattributes first commit 2023-09-12 20:08:05 -07:00
.gitignore feat: add build option for a ClickHouse bundled build (#1717) 2026-02-12 18:05:32 +00:00
.kodiak.toml feat: support HYPERDX_LOG_LEVEL env var (#66) 2023-10-18 19:01:44 +00:00
.nvmrc chore: Update to next 16, react 19, add react compiler (#1434) 2025-12-04 23:40:59 +00:00
.prettierignore Search Relative Time Queries (#1305) 2025-10-29 15:49:10 +00:00
.prettierrc first commit 2023-09-12 20:08:05 -07:00
.yarnrc.yml feat: move more codes 2024-11-21 21:44:33 -08:00
CLAUDE.md feat: Add list Webhooks API (#1802) 2026-02-26 12:20:45 +00:00
CONTRIBUTING.md Improve common-utils build performance and add support for .env.local (#1466) 2025-12-11 23:07:16 +00:00
DEPLOY.md update docs spelling (#1365) 2025-11-14 15:04:26 +00:00
docker-compose.ci.yml chore: Run integration tests on different ports (#1801) 2026-02-25 20:52:17 +00:00
docker-compose.dev.yml chore: update clickhouse version for compose files to 26.1 (#1791) 2026-02-24 15:24:43 -05:00
docker-compose.yml chore: update clickhouse version for compose files to 26.1 (#1791) 2026-02-24 15:24:43 -05:00
LICENSE first commit 2023-09-12 20:08:05 -07:00
LOCAL.md chore: pull images from custom registry domain (#523) 2024-12-09 20:18:18 -08:00
Makefile build(deps): add security resolutions for vulnerable npm packages (#1740) 2026-02-26 02:14:24 +00:00
nx.json chore: Update to next 16, react 19, add react compiler (#1434) 2025-12-04 23:40:59 +00:00
package.json build(deps): add security resolutions for vulnerable npm packages (#1740) 2026-02-26 02:14:24 +00:00
README.md chore: Update docs for ClickStack and HyperDX v2 Launch (#878) 2025-05-29 16:32:47 +00:00
tsconfig.base.json revert: api esbuild (#1280) 2025-10-21 09:27:47 +00:00
version.sh chore: align all versions on 2.0.0 (#886) 2025-06-03 20:48:08 +00:00
yarn.lock build(deps): add security resolutions for vulnerable npm packages (#1740) 2026-02-26 02:14:24 +00:00

hyperdx logo


HyperDX

HyperDX, a core component of ClickStack, helps engineers quickly figure out why production is broken by making it easy to search & visualize logs and traces on top of any ClickHouse cluster (imagine Kibana, for ClickHouse).

DocumentationChat on DiscordLive DemoBug ReportsContributingWebsite

  • 🕵️ Correlate/search logs, metrics, session replays and traces all in one place
  • 📝 Schema agnostic, works on top of your existing ClickHouse schema
  • 🔥 Blazing fast searches & visualizations optimized for ClickHouse
  • 🔍 Intuitive full-text search and property search syntax (ex. level:err), SQL optional!
  • 📊 Analyze trends in anomalies with event deltas
  • 🔔 Set up alerts in just a few clicks
  • 📈 Dashboard high cardinality events without a complex query language
  • { Native JSON string querying
  • Live tail logs and traces to always get the freshest events
  • 🔭 OpenTelemetry supported out of the box
  • ⏱️ Monitor health and performance from HTTP requests to DB queries (APM)

Search logs and traces all in one place

Spinning Up HyperDX

HyperDX can be deployed as part of ClickStack, which includes ClickHouse, HyperDX, OpenTelemetry Collector and MongoDB.

docker run -p 8080:8080 -p 4317:4317 -p 4318:4318 docker.hyperdx.io/hyperdx/hyperdx-all-in-one

Afterwards, you can visit http://localhost:8080 to access the HyperDX UI.

If you already have an existing ClickHouse instance, want to use a single container locally, or are looking for production deployment instructions, you can view the different deployment options in our deployment docs.

If your server is behind a firewall, you'll need to open/forward port 8080, 8000 and 4318 on your firewall for the UI, API and OTel collector respectively.

We recommend at least 4GB of RAM and 2 cores for testing.

Hosted ClickHouse Cloud

You can also deploy HyperDX with ClickHouse Cloud, you can sign up for free and get started in just minutes.

Instrumenting Your App

To get logs, metrics, traces, session replay, etc into HyperDX, you'll need to instrument your app to collect and send telemetry data over to your HyperDX instance.

We provide a set of SDKs and integration options to make it easier to get started with HyperDX, such as Browser, Node.js, and Python

You can find the full list in our docs.

OpenTelemetry

Additionally, HyperDX is compatible with OpenTelemetry, a vendor-neutral standard for instrumenting your application backed by CNCF. Supported languages/platforms include:

  • Kubernetes
  • Javascript
  • Python
  • Java
  • Go
  • Ruby
  • PHP
  • .NET
  • Elixir
  • Rust

(Full list here)

Once HyperDX is running, you can point your OpenTelemetry SDK to the OpenTelemetry collector spun up at http://localhost:4318.

Contributing

We welcome all contributions! There's many ways to contribute to the project, including but not limited to:

Motivation

Our mission is to help engineers ship reliable software. To enable that, we believe every engineer needs to be able to easily leverage production telemetry to quickly solve burning production issues.

However, in our experience, the existing tools we've used tend to fall short in a few ways:

  1. They're expensive, and the pricing has failed to scale with TBs of telemetry becoming the norm, leading to teams aggressively cutting the amount of data they can collect.
  2. They're hard to use, requiring full-time SREs to set up, and domain experts to use confidently.
  3. They requiring hopping from tool to tool (logs, session replay, APM, exceptions, etc.) to stitch together the clues yourself.

We hope you give HyperDX in ClickStack a try and let us know how we're doing!

Contact

HyperDX Usage Data

HyperDX collects anonymized usage data for open source deployments. This data supports our mission for observability to be available to any team and helps support our open source product run in a variety of different environments. While we hope you will continue to support our mission in this way, you may opt out of usage data collection by setting the USAGE_STATS_ENABLED environment variable to false. Thank you for supporting the development of HyperDX!

License

MIT