Skip to content

Commit

Permalink
Fix minor UI suggestions (#1305)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kgopal492
kgopal492 authored Aug 3, 2023
1 parent ec42929 commit 71b9e2a
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 88 deletions.
2 changes: 1 addition & 1 deletion querybook/webapp/components/CodeMirrorTooltip/CodeMirrorTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface ICodeMirrorTooltipProps {
suggestionText?: string;

openTableModal?: () => any;
onAcceptSuggestion?: () => void;
onAcceptSuggestion?: (suggestion: string) => void;
hide: () => any;
}

Expand Down
21 changes: 14 additions & 7 deletions querybook/webapp/components/CodeMirrorTooltip/SuggestionTooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import React, { useCallback, useMemo } from 'react';
import { Button } from 'ui/Button/Button';

interface IProps {
suggestionText: string;
onAcceptSuggestion: () => void;
onAcceptSuggestion: (suggestion: string) => void;
}

const SUGGESTION_MAX_LENGTH = 20;
Expand All @@ -12,10 +12,17 @@ export const SuggestionTooltip: React.FunctionComponent<IProps> = ({
suggestionText,
onAcceptSuggestion,
}) => {
const truncatedSuggestion =
suggestionText.length > SUGGESTION_MAX_LENGTH
? suggestionText.slice(0, SUGGESTION_MAX_LENGTH) + '...'
: suggestionText;
const truncatedSuggestion = useMemo(
() =>
suggestionText.length > SUGGESTION_MAX_LENGTH
? suggestionText.slice(0, SUGGESTION_MAX_LENGTH - 3) + '...'
: suggestionText,
[suggestionText]
);

const onClick = useCallback(() => {
onAcceptSuggestion(suggestionText);
}, [onAcceptSuggestion, suggestionText]);

return (
<div className="rich-text-content">
Expand All @@ -25,7 +32,7 @@ export const SuggestionTooltip: React.FunctionComponent<IProps> = ({
<div className="mt8 right-align">
<Button
title="Accept"
onClick={onAcceptSuggestion}
onClick={onClick}
theme="fill"
color="confirm"
icon="Check"
Expand Down
153 changes: 73 additions & 80 deletions querybook/webapp/components/QueryEditor/QueryEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
import { useAutoComplete } from 'hooks/queryEditor/useAutoComplete';
import { useCodeAnalysis } from 'hooks/queryEditor/useCodeAnalysis';
import { useLint } from 'hooks/queryEditor/useLint';
import { useDebouncedFn } from 'hooks/useDebouncedFn';
import CodeMirror, { CodeMirrorKeyMap } from 'lib/codemirror';
import { SQL_JINJA_MODE } from 'lib/codemirror/codemirror-mode';
import {
Expand Down Expand Up @@ -378,95 +379,87 @@ export const QueryEditor: React.FC<
[language, functionDocumentationByNameByLanguage]
);

const onTextHoverLongDebounce = useMemo(
() =>
debounce(
async (editor: CodeMirror.Editor, node, e, pos, token) => {
if (
markerRef.current == null &&
(token.type === 'variable-2' || token.type == null)
) {
// Check if token is inside a table
const tokenInsideTable = await isTokenInTable(
pos,
token
const onTextHoverLongDebounce = useDebouncedFn(
async (editor: CodeMirror.Editor, node, e, pos, token) => {
if (
markerRef.current == null &&
(token.type === 'variable-2' || token.type == null)
) {
// Check if token is inside a table
const tokenInsideTable = await isTokenInTable(pos, token);
const markTextFrom = {
line: pos.line,
ch: token.start,
};
const markTextTo = {
line: pos.line,
ch: token.end,
};
if (tokenInsideTable) {
const { tableInfo } = tokenInsideTable;
if (tableInfo) {
markTextAndShowTooltip(
editor,
markTextFrom,
markTextTo,
{
tableId: tableInfo.id,
openTableModal: () =>
openTableModal(tableInfo.id),
}
);
const markTextFrom = {
line: pos.line,
ch: token.start,
};
const markTextTo = {
line: pos.line,
ch: token.end,
};
if (tokenInsideTable) {
const { tableInfo } = tokenInsideTable;
if (tableInfo) {
markTextAndShowTooltip(
editor,
markTextFrom,
markTextTo,
{
tableId: tableInfo.id,
openTableModal: () =>
openTableModal(tableInfo.id),
}
);
} else {
markTextAndShowTooltip(
editor,
markTextFrom,
markTextTo,
{
error: 'Table does not exist!',
}
);
} else {
markTextAndShowTooltip(
editor,
markTextFrom,
markTextTo,
{
error: 'Table does not exist!',
}
}
);
}
}

const nextChar = editor.getDoc().getLine(pos.line)[
token.end
];
if (nextChar === '(') {
// if it seems like a function call
const functionDef = matchFunctionWithDefinition(
token.string
);
if (functionDef) {
markTextAndShowTooltip(
editor,
markTextFrom,
markTextTo,
{
functionDocumentations: functionDef,
}
);
const nextChar = editor.getDoc().getLine(pos.line)[
token.end
];
if (nextChar === '(') {
// if it seems like a function call
const functionDef = matchFunctionWithDefinition(
token.string
);
if (functionDef) {
markTextAndShowTooltip(
editor,
markTextFrom,
markTextTo,
{
functionDocumentations: functionDef,
}
}
);
}
},
600
),
}
}
},
600,
[isTokenInTable, matchFunctionWithDefinition, openTableModal]
);

const onTextHoverShortDebounce = useMemo(
() =>
debounce((editor: CodeMirror.Editor, node, e, pos, _token) => {
if (markerRef.current == null) {
const suggestionAnnotation =
getSuggestionByPosition(pos);
if (suggestionAnnotation != null) {
const { suggestion, from, to } =
suggestionAnnotation;
markTextAndShowTooltip(editor, from, to, {
onAcceptSuggestion: () =>
editor.replaceRange(suggestion, from, to),
suggestionText: suggestion,
});
}
const onTextHoverShortDebounce = useDebouncedFn(
(editor: CodeMirror.Editor, node, e, pos, _token) => {
if (markerRef.current == null) {
const suggestionAnnotation = getSuggestionByPosition(pos);
if (suggestionAnnotation != null) {
const { suggestion, from, to } = suggestionAnnotation;
markTextAndShowTooltip(editor, from, to, {
onAcceptSuggestion: (suggestion: string) =>
editor.replaceRange(suggestion, from, to),
suggestionText: suggestion,
});
}
}, 100),
}
},
100,
[getSuggestionByPosition]
);

Expand Down
10 changes: 10 additions & 0 deletions querybook/webapp/hooks/useDebouncedFn.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { useMemo } from 'react';
import { debounce } from 'lodash';

export function useDebouncedFn<F extends (...args: any) => any>(
fn: F,
timeout: number,
deps: any[]
) {
return useMemo(() => debounce(fn, timeout), deps);
}

0 comments on commit 71b9e2a

Please sign in to comment.