feat: add query component

packages/studio-explore/src/app.tsx

@@ -41,13 +41,16 @@ import {
   Overview,
   FloatTabs,
   Placeholder,
+  CypherQuery,
 } from './components';
 import {
   BgColorsOutlined,
   BarChartOutlined,
   InfoCircleOutlined,
   TableOutlined,
   GroupOutlined,
+  CodeOutlined,
+  CodeTwoTone,
 } from '@ant-design/icons';
 import { Divider, Flex, theme, Segmented, Tabs, Typography } from 'antd';
 import { getDefaultServices } from './services';
@@ -137,6 +140,12 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
                   children: <StyleSetting />,
                   key: 'StyleSetting',
                 },
+                {
+                  label: <Typography.Title level={3}>Cypher Query</Typography.Title>,
+                  icon: <CodeOutlined />,
+                  children: <CypherQuery />,
+                  key: 'CypherQuery',
+                },
               ]}
               tools={
                 <>

packages/studio-explore/src/components/CypherQuery/index.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Input, Flex, Typography, Space, Button, InputRef } from 'antd';
+import { PlayCircleOutlined } from '@ant-design/icons';
+import { useContext, type IQueryStatement } from '@graphscope/studio-graph';
+interface IStatementQueryProps {}
+
+const CypherQuery: React.FunctionComponent<IStatementQueryProps> = props => {
+  const inputRef = React.useRef<InputRef>(null);
+  const { store, updateStore } = useContext();
+  const { getService } = store;
+  const handleQuery = async () => {
+    if (inputRef.current) {
+      //@ts-ignore
+      const { value } = inputRef.current.resizableTextArea.textArea;
+      const data = await getService<IQueryStatement>('queryStatement')(value);
+      updateStore(draft => {
+        draft.data = data;
+        draft.source = data;
+      });
+    }
+  };
+  return (
+    <Flex vertical gap={12}>
+      <Typography.Text italic>You can write Cypher queries here to retrieve data.</Typography.Text>
+      <Input.TextArea rows={10} ref={inputRef} defaultValue={`Match (n) return n limit 100`}></Input.TextArea>
+      <Space>
+        <Button icon={<PlayCircleOutlined />} block onClick={handleQuery}>
+          Query
+        </Button>
+      </Space>
+    </Flex>
+  );
+};
+
+export default CypherQuery;

packages/studio-explore/src/components/FloatTabs/index.tsx

@@ -154,17 +154,19 @@ const FloatTabs: React.FunctionComponent<IFloatTabsProps> = props => {
             const iconStyle: React.CSSProperties = {
               color: isActive ? token.colorBgBase : token.colorText,
             };
+            const isMatch = item.key === state.activeKey;
             return (
               <Button
                 key={item.key}
                 icon={item.icon}
                 style={iconStyle}
-                type={item.key === state.activeKey ? 'primary' : 'text'}
+                type={isMatch ? 'primary' : 'text'}
                 onClick={() => {
                   setState(preState => {
                     return {
                       ...preState,
                       activeKey: item.key,
+                      visible: isMatch ? !preState.visible : true,
                     };
                   });
                 }}

packages/studio-explore/src/components/index.tsx

@@ -9,3 +9,4 @@ export { default as Statistics } from './Statistics';
 export { default as Overview } from './Overview';
 export { default as FloatTabs } from './FloatTabs';
 export { default as Placeholder } from './Placeholder';
+export { default as CypherQuery } from './CypherQuery';