Chore: Combine three graph query drivers into one function

examples/graphy/src/pages/explore/paper-reading/index.tsx

@@ -118,7 +118,7 @@ const PaperReading: React.FunctionComponent<QueryGraphProps> = props => {
             <Loading />
             <ContextMenu>
               <NeighborQuery />
-              <CommonNeighbor onQuery={SERVICES.queryCypher} />
+              <CommonNeighbor />
               <DeleteLeafNodes />
               <DeleteNode />
             </ContextMenu>

packages/studio-components/src/Icons/Graph2D.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-
+import { theme } from 'antd';
 interface IGraph3DProps {
   style?: React.CSSProperties;
 }
 const Graph2D: React.FunctionComponent<IGraph3DProps> = props => {
-  const { style } = props;
-  const { color = '#000', fontSize = '18px' } = style as { color: string; fontSize: string };
+  const { style = {} } = props;
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
+
   return (
     <div>
       <svg

packages/studio-components/src/Icons/Graph3D.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-
+import { theme } from 'antd';
 interface IGraph3DProps {
   style?: React.CSSProperties;
 }
 
 const Graph3D: React.FunctionComponent<IGraph3DProps> = props => {
-  const { style } = props;
-  const { color, fontSize = '18px' } = style as { color: string; fontSize: string };
+  const { style = {} } = props;
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
   return (
     <div>
       <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>

packages/studio-components/src/Icons/Lasso.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-
+import { theme } from 'antd';
 interface IClusterProps {
   style?: React.CSSProperties;
 }
 
 const Lasso: React.FunctionComponent<IClusterProps> = props => {
   const { style = {} } = props;
-  const { fontSize = 18, color = '#000000' } = style;
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
   return (
     <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>
       <path

packages/studio-components/src/Icons/Lock.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-
+import { theme } from 'antd';
 interface ILockProps {
   style?: React.CSSProperties;
 }
 
 const Lock: React.FunctionComponent<ILockProps> = props => {
-  const { style } = props;
-  const { color = '#000', fontSize = '14px' } = style || {};
+  const { style = {} } = props;
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
   return (
     <svg width={fontSize} height={fontSize} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
       <path

packages/studio-components/src/Icons/Punctuation.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-
+import { theme } from 'antd';
 interface IPunctuationProps {
   style?: React.CSSProperties;
 }
 
 const Punctuation: React.FC<IPunctuationProps> = ({ style = {} }) => {
-  const { color = '#B668B0', fontSize = '16px' } = style;
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
 
   return (
     <svg

packages/studio-components/src/Icons/Sidebar.tsx

@@ -4,7 +4,7 @@ export default ({ style, revert }: { style?: React.CSSProperties; revert?: boole
   const { token } = theme.useToken();
   // 根据revert属性判断是否需要镜像
   const transformStyle = revert ? { ...style, transform: 'scaleX(-1)' } : style;
-  const { color = token.colorText, fontSize = '14px' } = style || {};
+  const { color = token.colorText, fontSize = '16px' } = style || {};
   return (
     <svg
       viewBox="0 0 1024 1024"

packages/studio-components/src/Icons/Trash.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
-export default ({ style, disabled }: { style?: React.CSSProperties; disabled?: boolean }) => {
-  const { color, fontSize = '15px' } = style || {};
+import { theme } from 'antd';
+export default ({ style = {} }: { style?: React.CSSProperties }) => {
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
+
   return (
     <svg
       width={fontSize}

packages/studio-components/src/Icons/Unlock.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-
+import { theme } from 'antd';
 interface IUnlockProps {
   style?: React.CSSProperties;
 }
 
 const Unlock: React.FunctionComponent<IUnlockProps> = props => {
-  const { style } = props;
-  const { color = '#000', fontSize = '14px' } = style || {};
+  const { style = {} } = props;
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
   return (
     <svg width={fontSize} height={fontSize} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
       <path

packages/studio-components/src/Icons/primary-key.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-export default ({ style: { color, fontSize = '16px' } }: { style: React.CSSProperties }) => {
+import { theme } from 'antd';
+export default ({ style = {} }: { style: React.CSSProperties }) => {
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
   return (
     <svg width={fontSize} height={fontSize} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <path

packages/studio-driver/package.json

@@ -22,7 +22,8 @@
   "license": "ISC",
   "dependencies": {
     "@graphscope/_test_gremlin_": "^0.1.2",
-    "neo4j-driver": "^5.12.0"
+    "neo4j-driver": "^5.12.0",
+    "@kuzu/kuzu-wasm": "0.7.0"
   },
   "publishConfig": {
     "access": "public",

packages/studio-driver/src/index.ts

@@ -1,39 +1,7 @@
 import CypherDriver from './cypher-driver';
 import GremlinDriver from './gremlin-driver';
+import { queryGraph, cancelGraph, getDriver } from './queryGraph';
+import { KuzuDriver } from './kuzu-wasm-driver';
 
-export { CypherDriver, GremlinDriver };
-
-const DriverMap = new Map();
-
-export interface QueryParams {
-  script: string;
-  language: 'gremlin' | 'cypher';
-  endpoint: string;
-  username?: string;
-  password?: string;
-}
-
-export const queryGraph = async (params: QueryParams) => {
-  const { language, endpoint, script, username, password } = params;
-  const id = `${language}_${endpoint}`;
-
-  if (!DriverMap.has(id)) {
-    if (language === 'cypher') {
-      DriverMap.set(id, new CypherDriver(endpoint, username, password));
-    }
-    if (language === 'gremlin') {
-      DriverMap.set(id, new GremlinDriver(endpoint, username, password));
-    }
-  }
-  const driver = DriverMap.get(id);
-  return driver.query(script);
-};
-
-export const cancelGraph = async (params: QueryParams) => {
-  const { language, endpoint } = params;
-  const id = `${language}_${endpoint}`;
-  if (!DriverMap.has(id)) {
-    const driver = DriverMap.get(id);
-    driver.close();
-  }
-};
+export { CypherDriver, GremlinDriver, KuzuDriver, queryGraph, cancelGraph, getDriver };
+export type { QueryParams } from './queryGraph';