chore: Support the Gremlin language for recommended querying

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Flex, Spin } from 'antd';
+interface IGlobalSpinProps {}
+
+const GlobalSpin: React.FunctionComponent<IGlobalSpinProps> = props => {
+  return (
+    <Flex
+      justify="center"
+      align="center"
+      vertical
+      style={{
+        position: 'fixed',
+        top: '0px',
+        left: '0px',
+        right: '0px',
+        bottom: '0px',
+      }}
+    >
+      <Spin size="large" />
+    </Flex>
+  );
+};
+
+export default GlobalSpin;

packages/studio-components/src/index.tsx

@@ -19,6 +19,7 @@ export { default as Slot } from './Slot';
 export { default as TypingText } from './TypingText';
 export { default as CreatePortal } from './CreatePortal';
 export { default as Layout } from './layout';
+export { default as GlobalSpin } from './GlobalSpin';
 /** all */
 export * as Utils from './Utils';
 export * as Icons from './Icons';

packages/studio-components/src/layout/sidebar.tsx

@@ -72,7 +72,7 @@ const Sidebar: React.FunctionComponent<ISidebar> = props => {
           defaultSelectedKeys={[activeKey]}
           selectedKeys={[activeKey]}
           items={SIDE_MENU}
-          mode="vertical"
+          mode="inline"
           style={{
             boxSizing: 'border-box',
             borderInlineEnd: 'none',
@@ -87,7 +87,7 @@ const Sidebar: React.FunctionComponent<ISidebar> = props => {
             defaultSelectedKeys={[activeKey]}
             selectedKeys={[activeKey]}
             items={SETTING_MENU}
-            mode="vertical"
+            mode="inline"
             style={{
               borderInlineEnd: 'none',
             }}

packages/studio-graph/src/graph/useGraph.ts

@@ -21,6 +21,7 @@ import {
   forceCollide as d3ForceCollide,
 } from 'd3-force-3d';
 
+let timer: any = null;
 export default function useGraph<P extends GraphProps>(props: P) {
   const {
     onInit,
@@ -158,15 +159,15 @@ export default function useGraph<P extends GraphProps>(props: P) {
   useEffect(() => {
     if (graphRef.current) {
       graphRef.current.graphData(Utils.fakeSnapshot({ nodes: data.nodes, links: data.edges }));
-      let timeIndex = 0;
-      const timer = setInterval(() => {
-        timeIndex++;
-        if (timeIndex >= 4) {
-          clearInterval(timer);
-        }
-        graphRef.current?.zoomToFit(400, 10 * timeIndex);
-      }, 400);
+
+      timer = setTimeout(() => {
+        console.log('Math.max(400 / (data.nodes.length + 1), 20)', Math.max(400 / (data.nodes.length + 1), 20));
+        graphRef.current?.zoomToFit(400, Math.max(400 / (data.nodes.length + 1), 20));
+      }, 1200);
     }
+    return () => {
+      clearTimeout(timer);
+    };
   }, [data]);
   useEffect(() => {
     if (graphRef.current) {

packages/studio-importor/src/app/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
 import GraphCanvas from './graph-canvas';
 import PropertiesEditor from './properties-editor';
-
+import { Spin } from 'antd';
 import { ReactFlowProvider } from 'reactflow';
-import { Section, StudioProvier } from '@graphscope/studio-components';
+import { Section, StudioProvier, GlobalSpin } from '@graphscope/studio-components';
 import 'reactflow/dist/style.css';
 import { transformGraphNodes, transformEdges } from './elements/index';
 import { IdContext } from './useContext';
@@ -49,6 +49,7 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
     rightSide,
   } = props;
   const { store, updateStore } = useContext();
+  const { isReady } = store;
 
   useEffect(() => {
     (async () => {
@@ -67,6 +68,7 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
       const isEmpty = nodes.length === 0;
 
       updateStore(draft => {
+        draft.isReady = true;
         draft.nodes = nodes;
         draft.edges = edges;
         draft.appMode = appMode;
@@ -82,6 +84,7 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
     })();
   }, []);
   const IS_PURE = appMode === 'PURE';
+  console.log('isReady', isReady);
 
   return (
     <StudioProvier locales={locales}>
@@ -106,12 +109,16 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
         style={{ height: 'calc(100vh - 50px)', ...style }}
         splitBorder
       >
-        <ReactFlowProvider>
-          {!IS_PURE && <ButtonController />}
+        {isReady ? (
+          <ReactFlowProvider>
+            {!IS_PURE && <ButtonController />}
 
-          <GraphCanvas />
-          {children}
-        </ReactFlowProvider>
+            <GraphCanvas />
+            {children}
+          </ReactFlowProvider>
+        ) : (
+          <GlobalSpin />
+        )}
       </Section>
     </StudioProvier>
   );

packages/studio-importor/src/app/useContext.ts

@@ -9,7 +9,7 @@ export type IStore = {
   appMode: 'DATA_MODELING' | 'DATA_IMPORTING' | 'PURE';
   /**不可编辑状态 */
   disabled: boolean;
-
+  isReady: boolean;
   currentType: 'nodes' | 'edges';
   currentId: string;
   nodes: ISchemaNode[];
@@ -52,6 +52,7 @@ export const initialStore: IStore = {
     nodes: [],
     edges: [],
   },
+  isReady: false,
   displayMode: 'graph',
   graphPosition: {},
   tablePosition: {},

packages/studio-query/src/app/sidebar/recommended-statements/index.tsx

@@ -35,7 +35,8 @@ const styles = {
 };
 const RecommendedStatements: React.FunctionComponent<IRecommendedStatementsProps> = props => {
   const { schemaData, schemaId } = props;
-  const { updateStore } = useContext();
+  const { updateStore, store } = useContext();
+  const { language } = store;
   const graphSchema = transGraphSchema(schemaData);
   const configMap = getStyleConfig(schemaData, schemaId);
   const { nodes, edges } = schemaData;
@@ -44,18 +45,32 @@ const RecommendedStatements: React.FunctionComponent<IRecommendedStatementsProps
 
   const handleClick = (label: string, type: 'nodes' | 'edges' | 'property') => {
     let script = '';
-    if (type === 'nodes') {
-      script = `MATCH (n:${label}) RETURN n LIMIT 25`;
-    }
-    if (type === 'edges') {
-      script = `MATCH (a)-[b:${label}]->(c) RETURN a,b,c LIMIT 25;`;
-    }
-    if (type === 'property') {
-      script = `MATCH(a) where a.${label} IS NOT NULL AND a.${label} <> ""
+
+    if (language === 'cypher') {
+      if (type === 'nodes') {
+        script = `MATCH (n:${label}) RETURN n LIMIT 25`;
+      }
+      if (type === 'edges') {
+        script = `MATCH (a)-[b:${label}]->(c) RETURN a,b,c LIMIT 25;`;
+      }
+      if (type === 'property') {
+        script = `MATCH(a) where a.${label} IS NOT NULL AND a.${label} <> ""
       WITH a.${label} as ${label}
       RETURN ${label} , COUNT(${label}) as ${label}_COUNT
       ORDER BY ${label}_COUNT DESC
       `;
+      }
+    }
+    if (language === 'gremlin') {
+      if (type === 'nodes') {
+        script = `g.V().hasLabel('${label}').limit(25)`;
+      }
+      if (type === 'edges') {
+        script = `g.V().outE('${label}').limit(25)`;
+      }
+      if (type === 'property') {
+        script = `g.V().has('${label}').groupCount().by('${label}').order().by(select(values), desc)`;
+      }
     }
     updateStore(draft => {
       draft.globalScript = script;

packages/studio-query/src/components/connect-endpoint/index.tsx

@@ -22,11 +22,11 @@ const ConnectEndpoint: React.FunctionComponent<IConnectEndpointProps> = props =>
   const { onConnect, onClose } = props;
   React.useEffect(() => {
     form.setFieldsValue({
-      query_language: props.query_language || storage.get('query_language'),
-      query_endpoint: props.query_endpoint || storage.get('query_endpoint'),
-      query_initiation: props.query_initiation || storage.get('query_initiation'),
-      query_username: props.query_username || storage.get('query_username'),
-      query_password: props.query_password || storage.get('query_password'),
+      query_language: props.query_language || storage.get('query_language') || 'cypher',
+      query_endpoint: props.query_endpoint || storage.get('query_endpoint') || 'neo4j://127.0.0.1:7687',
+      query_initiation: props.query_initiation || storage.get('query_initiation') || 'Browser',
+      query_username: props.query_username || storage.get('query_username') || 'admin',
+      query_password: props.query_password || storage.get('query_password') || 'password',
     });
   }, []);
   const handleConnect = () => {

packages/studio-website/src/layouts/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useContext, IGraph } from './useContext';
 
-import { Layout, LogoText, Utils, useCustomToken } from '@graphscope/studio-components';
+import { Layout, LogoText, Utils, useCustomToken, GlobalSpin } from '@graphscope/studio-components';
 import { DeploymentApiFactory } from '@graphscope/studio-server';
 import { SIDE_MENU, SETTING_MENU } from './const';
 import { Flex, Spin, notification } from 'antd';
@@ -114,10 +114,5 @@ export default function StudioLayout() {
     return <Layout sideMenu={[_SIDE, SETTING_MENU]} style={{ background: layoutBackground }} />;
   }
 
-  return (
-    <Flex justify="center" align="center" vertical style={{ height: '100vh' }}>
-      <Spin size="large" />
-      {/* <LogoText style={{ marginTop: '24px' }} animate={true} /> */}
-    </Flex>
-  );
+  return <GlobalSpin />;
 }

packages/studio-website/src/pages/index.tsx

@@ -1,7 +1,8 @@
 import React, { Suspense } from 'react';
 import { Routes, Route, Navigate, HashRouter } from 'react-router-dom';
-import { StudioProvier } from '@graphscope/studio-components';
+import { StudioProvier, GlobalSpin } from '@graphscope/studio-components';
 import Layout from '../layouts';
+import { Spin, Flex } from 'antd';
 
 import locales from '../locales';
 interface IPagesProps {
@@ -36,7 +37,7 @@ const Pages: React.FunctionComponent<IPagesProps> = props => {
         key={index}
         path={path}
         element={
-          <Suspense fallback={<></>}>
+          <Suspense fallback={<GlobalSpin />}>
             {/** @ts-ignore */}
             <Component />
           </Suspense>

packages/studio-website/src/pages/instance/lists/index.tsx

@@ -32,7 +32,7 @@ const InstanceCard: React.FC = () => {
     fetchLists();
   }, []);
   const isEmpty = instanceList.length === 0;
-  if (isEmpty) {
+  if (isEmpty && isReady) {
     return (
       <Result
         status="404"