Skip to content

fix(sql-editor): debounce decoration updates while typing #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xPolar wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(sql-editor): debounce decoration updates while typing #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions frontend/src/scenes/data-warehouse/editor/sqlEditorLogic.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ describe('sqlEditorLogic', () => {
editorRootLogic = undefined
logic?.unmount()
databaseLogic?.unmount()
jest.useRealTimers()
})

it('keeps configured filters when the filters placeholder is removed from the query text', () => {
Expand Down Expand Up @@ -253,6 +254,28 @@ describe('sqlEditorLogic', () => {
})
})

it('debounces active query decoration updates while typing', async () => {
jest.useFakeTimers()
logic = sqlEditorLogic({
tabId: TAB_ID,
monaco: createMockMonaco(),
editor: createMockEditor(),
})
logic.mount()
const updateActiveQueryDecoration = jest.fn()
logic.cache.updateActiveQueryDecoration = updateActiveQueryDecoration

logic.actions.setQueryInput('SELECT 1')
logic.actions.setQueryInput('SELECT 12')
logic.actions.setQueryInput('SELECT 123')

await jest.advanceTimersByTimeAsync(149)
expect(updateActiveQueryDecoration).not.toHaveBeenCalled()

await jest.advanceTimersByTimeAsync(1)
expect(updateActiveQueryDecoration).toHaveBeenCalledTimes(1)
})

it('does not count a commented filters placeholder as active', () => {
logic = sqlEditorLogic({
tabId: TAB_ID,
Expand Down
22 changes: 9 additions & 13 deletions frontend/src/scenes/data-warehouse/editor/sqlEditorLogic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,13 +597,10 @@ export const sqlEditorLogic = kea<sqlEditorLogicType>([
// subquery, which is too expensive to do on every arrow key.
cache.cursorDisposable?.dispose()
cache.cursorDisposable = props.editor.onDidChangeCursorPosition(() => {
if (cache.activeQueryDecorationDebounceTimeout) {
window.clearTimeout(cache.activeQueryDecorationDebounceTimeout)
}
cache.activeQueryDecorationDebounceTimeout = window.setTimeout(() => {
cache.activeQueryDecorationDebounceTimeout = null
cache.updateActiveQueryDecoration?.()
}, 150)
cache.disposables.add(() => {
const timeoutId = window.setTimeout(() => cache.updateActiveQueryDecoration?.(), 150)
return () => window.clearTimeout(timeoutId)
}, 'activeQueryDecorationDebounce')
})

// Set up the active-query outline overlay. We render a single `div` parented
Expand Down Expand Up @@ -1887,8 +1884,11 @@ export const sqlEditorLogic = kea<sqlEditorLogicType>([
// everything whenever the editor content changes.
cache.subqueryValidationCache?.clear()

// Decorations are cheap and visual — update immediately for responsiveness.
cache.updateActiveQueryDecoration?.()
// Resolving the active subquery parses the full query, so wait until typing settles.
cache.disposables.add(() => {
const timeoutId = window.setTimeout(() => cache.updateActiveQueryDecoration?.(), 150)
return () => window.clearTimeout(timeoutId)
}, 'activeQueryDecorationDebounce')

// Skip re-parsing if the text hasn't changed since the last parse.
if (cache.lastParsedQueryInput === queryInput && cache.lastParsedQueryResult !== undefined) {
Expand Down Expand Up @@ -2640,10 +2640,6 @@ export const sqlEditorLogic = kea<sqlEditorLogicType>([
cache.umountDataNode = null

// Drop any pending decoration work so late callbacks don't touch a disposed editor.
if (cache.activeQueryDecorationDebounceTimeout) {
window.clearTimeout(cache.activeQueryDecorationDebounceTimeout)
cache.activeQueryDecorationDebounceTimeout = null
}
if (cache.activeQueryFlashTimeout) {
window.clearTimeout(cache.activeQueryFlashTimeout)
cache.activeQueryFlashTimeout = null
Expand Down