External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-23 10:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve suggestion ux in query search

Browse Source
This commit is contained in:
Yunus M 2025-06-14 23:32:37 +05:30 committed by SagarRajput-7
parent cd29cfb609
commit e0c30a0e4b
1 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
View File

@ -3,13 +3,19 @@ import './QuerySearch.styles.scss';
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'; import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
import { import {
autocompletion, autocompletion,
closeCompletion,
CompletionContext, CompletionContext,
completionKeymap,
CompletionResult, CompletionResult,
startCompletion, startCompletion,
} from '@codemirror/autocomplete'; } from '@codemirror/autocomplete';
import { javascript } from '@codemirror/lang-javascript'; import { javascript } from '@codemirror/lang-javascript';
import { copilot } from '@uiw/codemirror-theme-copilot'; import { copilot } from '@uiw/codemirror-theme-copilot';
import CodeMirror, { EditorView, Extension } from '@uiw/react-codemirror'; import CodeMirror, {
EditorView,
Extension,
keymap,
} from '@uiw/react-codemirror';
import { Card, Collapse, Space, Tag, Typography } from 'antd'; import { Card, Collapse, Space, Tag, Typography } from 'antd';
import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion'; import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions'; import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
@ -76,6 +82,8 @@ function QuerySearch(): JSX.Element {
const [showExamples] = useState(false); const [showExamples] = useState(false);
const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 }); const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
const [isFocused, setIsFocused] = useState(false);
const lastPosRef = useRef<{ line: number; ch: number }>({ line: 0, ch: 0 }); const lastPosRef = useRef<{ line: number; ch: number }>({ line: 0, ch: 0 });
// Reference to the editor view for programmatic autocompletion // Reference to the editor view for programmatic autocompletion
@ -700,6 +708,13 @@ function QuerySearch(): JSX.Element {
})), })),
); );
// Effect to handle focus state and trigger suggestions
useEffect(() => {
if (isFocused && editorRef.current) {
startCompletion(editorRef.current);
}
}, [isFocused]);
useEffect(() => { useEffect(() => {
if (queryKeySuggestions) { if (queryKeySuggestions) {
const options = generateOptions(queryKeySuggestions.data.data); const options = generateOptions(queryKeySuggestions.data.data);
@ -777,12 +792,30 @@ function QuerySearch(): JSX.Element {
EditorView.lineWrapping, EditorView.lineWrapping,
stopEventsExtension, stopEventsExtension,
disallowMultipleSpaces, disallowMultipleSpaces,
keymap.of([
...completionKeymap,
{
key: 'Escape',
run: closeCompletion,
},
]),
]} ]}
placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')" placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')"
basicSetup={{ basicSetup={{
lineNumbers: false, lineNumbers: false,
}} }}
autoFocus onFocus={(): void => {
setIsFocused(true);
if (editorRef.current) {
startCompletion(editorRef.current);
}
}}
onBlur={(): void => {
setIsFocused(false);
if (editorRef.current) {
closeCompletion(editorRef.current);
}
}}
/> />
{query && ( {query && (