Perf query cell

packages/studio-driver/.npmrc

@@ -0,0 +1 @@
+registry=http://registry.anpm.alibaba-inc.com

packages/studio-query/.npmrc

@@ -0,0 +1 @@
+registry=http://registry.anpm.alibaba-inc.com

packages/studio-query/package.json

@@ -28,22 +28,25 @@
     "father": "^4.4.1"
   },
   "dependencies": {
-    "@graphscope/studio-components": "workspace:*",
-    "@graphscope/use-zustand": "workspace:*",
-    "@graphscope/studio-graph": "workspace:*",
-    "@graphscope/studio-driver": "workspace:*",
-    "@graphscope/studio-draw-pattern": "workspace:*",
-    "react-json-view": "^1.21.3",
-    "react-intl": "^6.6.1",
+    "@antv/g2": "^5.2.8",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@fortawesome/fontawesome-svg-core": "latest",
     "@fortawesome/free-solid-svg-icons": "latest",
     "@fortawesome/react-fontawesome": "latest",
-    "@fortawesome/fontawesome-svg-core": "latest",
-    "@antv/g2": "^5.2.8",
-    "uuid": "^9.0.1",
-    "dayjs": "^1.11.10",
     "@graphscope/_test_gremlin_": "^0.1.2",
+    "@graphscope/studio-components": "workspace:*",
+    "@graphscope/studio-draw-pattern": "workspace:*",
+    "@graphscope/studio-driver": "workspace:*",
+    "@graphscope/studio-graph": "workspace:*",
+    "@graphscope/use-zustand": "workspace:*",
+    "dayjs": "^1.11.10",
+    "monaco-editor": "^0.50.0",
     "neo4j-driver": "^5.12.0",
-    "monaco-editor": "^0.50.0"
+    "react-intl": "^6.6.1",
+    "react-json-view": "^1.21.3",
+    "uuid": "^9.0.1"
   },
   "author": "",
   "license": "ISC"

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

@@ -1,16 +1,12 @@
 import React, { useRef, useState, Suspense } from 'react';
-import { InsertRowAboveOutlined, OrderedListOutlined, PlayCircleOutlined } from '@ant-design/icons';
-import { Segmented, Button, Space, Flex } from 'antd';
+import { InsertRowAboveOutlined, OrderedListOutlined } from '@ant-design/icons';
+import { Segmented, Space, Flex, theme } 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'];
@@ -24,6 +20,8 @@ const options = [
   { icon: <OrderedListOutlined />, value: 'flow' },
 ];
 
+const { useToken } = theme;
+
 const ModeSwitch = () => {
   const { updateStore, store } = useContext();
   const { mode } = store;
@@ -47,6 +45,7 @@ const ModeSwitch = () => {
     />
   );
 };
+
 const LanguageSwitch = () => {
   const { updateStore, store } = useContext();
   const { language } = store;
@@ -73,62 +72,17 @@ const LanguageSwitch = () => {
 
 const Header: React.FunctionComponent<IHeaderProps> = props => {
   const { connectComponent, displaySidebarPosition } = props;
-  const { updateStore, store } = useContext();
-  const editorRef = useRef<any>(null);
-  const [state, updateState] = useState({
-    // lineCount: 1,
-    clear: false,
-  });
-
-  const { globalScript, autoRun, language, graphId } = store;
-
-  // const handleChange = value => {};
-  const onChangeContent = () => {
-    updateState(preState => {
-      return {
-        ...preState,
-        // lineCount: line,
-        clear: false,
-      };
-    });
-  };
-  const handleQuery =debounce(() => {
-    if (editorRef.current) {
-      const value = editorRef.current.codeEditor.getValue();
-      if (value === '') {
-        return;
-      }
-      updateStore(draft => {
-        draft.globalScript = '';
-        const id = uuidv4();
-        draft.statements = [
-          {
-            id,
-            name: id,
-            script: value,
-            language: language,
-          },
-          ...draft.statements,
-        ];
-        draft.activeId = id;
-      });
-
-      updateState(preState => {
-        return {
-          ...preState,
-          clear: true,
-        };
-      });
-    }
-  }, 500);
-
-  const minRows = countLines(globalScript);
+  const { store } = useContext();
+  const { language } = store;
+  const { token } = useToken();
 
   return (
     <div
       style={{
         width: '100%',
-        padding: '8px 0px',
+        padding: '10px 0px',
+        backgroundColor: token.colorBgContainer,
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
       }}
     >
       <Flex justify="space-between" align="center">
@@ -139,36 +93,11 @@ const Header: React.FunctionComponent<IHeaderProps> = props => {
 
         {connectComponent}
         <Space>
-          <DrawPatternModal></DrawPatternModal>
+          <DrawPatternModal />
           <ModeSwitch />
           {displaySidebarPosition === 'right' && <ToggleButton displaySidebarPosition={displaySidebarPosition} />}
         </Space>
       </Flex>
-      <Flex justify="space-between" style={{ marginTop: '8px' }}>
-        <CypherEditor
-          language={language}
-          onChangeContent={onChangeContent}
-          value={globalScript}
-          ref={editorRef}
-          maxRows={25}
-          minRows={minRows}
-          clear={state.clear}
-          onInit={() => {
-            if (autoRun) {
-              handleQuery();
-            }
-          }}
-        />
-        <div style={{ flexBasis: '48px', flexShrink: 0 }}>
-          <Button
-            style={{ marginLeft: '10px' }}
-            type="text"
-            icon={<PlayCircleOutlined style={{ fontSize: '24px' }} />}
-            onClick={handleQuery}
-            size="large"
-          />
-        </div>
-      </Flex>
     </div>
   );
 };