Merge pull request #719 from xuewenjie123/fix-716

fix: #716 Rapid repeated clicking error

Author: pomelo-nwu

packages/studio-query/src/app/content/header.tsx

@@ -3,14 +3,14 @@ import { InsertRowAboveOutlined, OrderedListOutlined, PlayCircleOutlined } from
 import { Segmented, Button, Space, Flex } from 'antd';
 import { IStudioQueryProps, localStorageVars } from '../context';
 import { useContext } from '../context';
-
+import { Utils } from '@graphscope/studio-components';
 import { countLines } from '../utils';
 import { v4 as uuidv4 } from 'uuid';
 import ToggleButton from './toggle-button';
-
 import CypherEditor from '../../components/cypher-editor';
 import { DrawPatternModal } from '../../components/draw-pattern-modal';
 
+const { debounce } = Utils;
 interface IHeaderProps {
   connectComponent?: IStudioQueryProps['connectComponent'];
   displaySidebarPosition?: IStudioQueryProps['displaySidebarPosition'];
@@ -92,7 +92,7 @@ const Header: React.FunctionComponent<IHeaderProps> = props => {
       };
     });
   };
-  const handleQuery = () => {
+  const handleQuery =debounce(() => {
     if (editorRef.current) {
       const value = editorRef.current.codeEditor.getValue();
       if (value === '') {
@@ -120,7 +120,7 @@ const Header: React.FunctionComponent<IHeaderProps> = props => {
         };
       });
     }
-  };
+  }, 500);
 
   const minRows = countLines(globalScript);
 

packages/studio-query/src/statement/index.tsx

@@ -5,6 +5,9 @@ import Editor from './editor';
 import Result from './result';
 import { useIntl } from 'react-intl';
 import { IEditorProps } from './typing';
+import { Utils } from '@graphscope/studio-components';
+
+const { debounce } = Utils;
 
 export type IStatementProps = IEditorProps & {
   /** 是否是当前激活的语句 */
@@ -58,7 +61,7 @@ const Statement: React.FunctionComponent<IStatementProps> = props => {
     }
   }, [active]);
 
-  const handleQuery = async params => {
+  const handleQuery =debounce(async params => {
     if (isFetching) {
       onCancel && onCancel(params);
       updateState(preState => {
@@ -87,7 +90,8 @@ const Statement: React.FunctionComponent<IStatementProps> = props => {
         endTime: new Date().getTime(),
       };
     });
-  };
+  }, 500);
+   
   useEffect(() => {
     if (enableImmediateQuery) {
       console.log('enableImmediateQuery script', enableImmediateQuery, script, language);