feat: Monaco editor with LQL support for search field by msmithstubbs · Pull Request #3239 · Logflare/logflare

msmithstubbs · 2026-03-05T05:58:24Z

Use the Monaco editor component for the search field

Replaces the search field with a LiveMonacoEditor/1 component
Syntax highlight for LQL
Autocomplete for LQL operators, aggregates, source fields, and saved searches
Add vitest for JS testing framework (currently just covers lql_language.js)

I chose to replace the search <form> element and have the monaco editor instance communicate using liveview hooks and events. This simplified keeping the editor in sync with a hidden text input.

Fixes O11Y-1309

LQL syntax highlighting

Supports aggregate completions

Saved searches are included in autocomplete

Source query and recommended fields adopt similar styling

Same background and text colours, but not Monaco editor.

CleanShot.2026-03-10.at.13.08.47.mp4

Ziinc · 2026-03-05T06:05:31Z

we can style the new suggested field inputs to look like the monaco inputs but doesn't need to be a monaco editor.
looks great!
can you add in suggestions for opertaors and for supported aggregations as well?

msmithstubbs · 2026-03-05T06:11:05Z

we can style the new suggested field inputs to look like the monaco inputs but doesn't need to be a monaco editor.
Sure, makes sense.

looks great! can you add in suggestions for opertaors and for supported aggregations as well?

Yes, can do.

What about suggested searches? We use have a <datalist> for those currently, but they could be pulled into monaco editor's autocomplete, too?

Ziinc · 2026-03-12T05:21:02Z

What about suggested searches? We use have a for those currently, but they could be pulled into monaco editor's autocomplete, too?

Yes the demo looks great, perhaps for the first character, we can limit it to saved searches only

i think we can consolidate metadata: into m: and maybe add a helper description so something like m: (alias metadata:) and for timestamp: into t: too, since shorthand is more commonly used.

Probably can also consolidate the c:group_by together as well.

should be s: instead of s:*, don't want to encourage users to select the world, would be too many fields and bad for ux.

assets/js/lql_language.js

Ziinc

considering this is a very important flow, lets add an integration test using PhoenixTest that executes a search using this.

would likely need to add postgres lql support for it to run on CI. can be separate PR with this stacked.

Ziinc · 2026-03-12T05:22:49Z

assets/js/lql_language.js

+  { label: "m.", detail: "metadata field", insertText: "m." },
+  { label: "metadata.", detail: "metadata field", insertText: "metadata." },
+  { label: "s:*", detail: "select all fields", insertText: "s:*" },
+  { label: "c:count(*)", detail: "chart count", insertText: "c:count(*)" },


Suggested change

{ label: "c:count(*)", detail: "chart count", insertText: "c:count(*)" },

{ label: "c:count()", detail: "chart count", insertText: "c:count($0)" },

Ziinc · 2026-03-12T05:24:46Z

assets/js/lql_language.js

can we get this file's logic covered with tests? using vitest would be great, but whatever works.

too much chance for breakage for such an important component.

Ziinc · 2026-03-12T05:26:24Z

assets/js/lql_editor_wrapper_hook.js

+
+      const monaco = window.monaco;
+
+      registerLqlLanguage(monaco);


should wrap this in a try/do to prevent mount failure.

Wrapped registerLqlLanguage to catch failure. Was that where you think we'd get an exception? Or are you concerned monaco might not be loaded at all?

Ziinc · 2026-03-12T05:32:59Z

assets/js/source_lv_hooks.js

+      hook.pushEvent("soft_pause", {})
+    })
+  },
+  pushChartControlsUpdate() {


should cover this hook with an integration test as well.

Will include in the follow up integration test PR.

That should be an integration test with Playwright in test/e2e/features/ ?

Ziinc · 2026-03-12T05:35:29Z

lib/logflare_web/live/search_live/logs_search_lv.ex

+  defp schema_fields_json(source), do: source |> lql_schema_fields() |> Jason.encode!()
+
+  defp lql_schema_fields(source) do
+    case SourceSchemas.Cache.get_source_schema_by(source_id: source.id) do
+      %{schema_flat_map: flat_map} when is_map(flat_map) ->
+        Enum.map(flat_map, fn {name, type} ->
+          %{name: name, type: format_schema_type(type)}
+        end)
+
+      _ ->
+        []
+    end
+  end


can't we pass the flatmap directly? or this needs to be done elixir side?

We can pass the flatmap as is if we only want the field names. If we'd like the field types, too, we need to encode any tuples (such as {:list, :string}) because they can't currently be JSON encoded.

I've simplified the schema fields helper, and moved it to FormComponents which is a little bit simpler because it reduces passing another assign and attribute. I don't love that a helper in FormComponents is fetching a record which might hit the db, but it's cached so shouldn't be a problem in practice.

i think would be better to move the fetch out of the template and into the liveview. feels like a code smell, plus we can consolidate the calls (liveview also stores source schema in state)

Agree with that. I couldn't see anywhere SearchLV stores source schema currently but there would be some refactoring if we stack this on top of #3120

…onaco query field

github-actions bot assigned msmithstubbs Mar 5, 2026

msmithstubbs force-pushed the feat/o11y-1309 branch from 8d09395 to 8d8731d Compare March 5, 2026 05:59

msmithstubbs force-pushed the feat/o11y-1309 branch 8 times, most recently from e2018ce to 6451e20 Compare March 11, 2026 06:25

msmithstubbs changed the title ~~wip: Monaco editor with LQL support for search field~~ feat: Monaco editor with LQL support for search field Mar 11, 2026

msmithstubbs force-pushed the feat/o11y-1309 branch from d4eea0d to 47fe366 Compare March 12, 2026 00:59

msmithstubbs marked this pull request as ready for review March 12, 2026 01:25

msmithstubbs marked this pull request as draft March 12, 2026 03:56

msmithstubbs marked this pull request as ready for review March 12, 2026 04:18

Ziinc reviewed Mar 12, 2026

View reviewed changes

assets/js/lql_language.js Outdated Show resolved Hide resolved

Ziinc reviewed Mar 12, 2026

View reviewed changes

assets/js/lql_language.js Outdated Show resolved Hide resolved

Ziinc requested changes Mar 12, 2026

View reviewed changes

msmithstubbs force-pushed the feat/o11y-1309 branch 7 times, most recently from 59ffada to 23a9f06 Compare March 16, 2026 22:33

feat: Monaco editor with LQL support for search field

e854064

msmithstubbs and others added 19 commits March 19, 2026 12:55

use suggest_saved_searches for autocomplete

d8684bb

fix aggregate autocomplete

53371b2

ensure enter submits search

467a33c

use SavedSearches.Cache

98553a6

refactor: lql completions

ca6fa40

set saved searches on mount

5614bfb

refactor: handle querystring updates in updated() hook

eebe24f

fix: test

537c34d

ui: style suggested fields, source show field to be consistent with m…

dfe4c4b

…onaco query field

test: SearchLV query field has saved searches, schema fields

eec1145

ui: consistency for source search fields

f045dd0

Merge branch 'main' into feat/o11y-1309

cc4d51a

refactor: handle error in Lql editor mount

db839cb

refactor: simplify lql schema fields passed to client

86966b6

ui: condolidate lql group_by completions into single suggestion

0ddd8fa

ui: place cursor inside c:count completion

e088585

ui: drop * from lql select completion

7ecc670

ui: consolidate lql completion metadata and timestamp into m: and t:

8e47d23

ui: lql search only suggests saved searchs for first char

fda25bf

msmithstubbs force-pushed the feat/o11y-1309 branch 3 times, most recently from 6c08e9a to f97ad82 Compare March 19, 2026 04:58

msmithstubbs added 2 commits March 19, 2026 15:09

test: add test coverage for lql_language.js

90d4c58

refactor: move SourceSchema fetch to LiveView

1855617

msmithstubbs force-pushed the feat/o11y-1309 branch from f97ad82 to 1855617 Compare March 19, 2026 05:09

msmithstubbs requested a review from Ziinc March 19, 2026 05:26

	{ label: "c:count()", detail: "chart count", insertText: "c:count()" },
	{ label: "c:count()", detail: "chart count", insertText: "c:count($0)" },

Conversation

msmithstubbs commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ziinc commented Mar 5, 2026

Uh oh!

msmithstubbs commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ziinc commented Mar 12, 2026

Uh oh!

Uh oh!

Uh oh!

Ziinc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

msmithstubbs commented Mar 5, 2026 •

edited

Loading

msmithstubbs commented Mar 5, 2026 •

edited

Loading