Merge pull request #490 from GraphScope/chore-0905

Chore: Add online-visual-tool app

examples/graph-apps/src/index.tsx

@@ -5,23 +5,31 @@ import { Flex, Card, Typography, Divider, Tag } from 'antd';
 import { ConfigProvider, Skeleton, Space, Button } from 'antd';
 import { GithubOutlined, ReadOutlined } from '@ant-design/icons';
 // import locales from '../locales';
-// import { IntlProvider } from 'react-intl';
+import { IntlProvider } from 'react-intl';
 import PaperReading from './paper-reading';
 
 interface IPagesProps {}
 
 const APP_INFO = [
   {
-    name: 'Graph Data Query Scenarios',
+    name: 'Online Visual Graph Tool',
     description:
-      'Using powerful query languages like Cypher and Gremlin, enabling you to extract meaningful insights from complex networks of interconnected data',
+      'Allows users to upload JSON and CSV files, making it easy to explore, analyze, and visualize complex graph data with intuitive interfaces for building and understanding network relationships',
     icon: 'https://www.connectedpapers.com/img/ScienceMapping.2218dc18.png',
-    category: 'Graph Database',
-    link: '/paper-reading',
+    category: 'Graph Visualization',
+    link: '/online-visual-tool',
     dataset: 'https://github.com/csuvis/CyberAssetGraphData',
     github: '',
   },
-
+  {
+    name: 'Paper Discovery',
+    description:
+      'Discover the connections between papers by exploring how research builds upon existing knowledge, linking studies through shared references, methodologies, and findings to create a comprehensive view of academic contributions.',
+    icon: 'https://www.connectedpapers.com/img/ScienceMapping.2218dc18.png',
+    link: '/paper-reading',
+    category: 'Knowledge Graph',
+    dataset: 'https://github.com/csuvis/CyberAssetGraphData',
+  },
   {
     name: 'Discover Network Vulnerability Risks',
     description:
@@ -33,22 +41,23 @@ const APP_INFO = [
     github: '',
   },
   {
-    name: 'Paper Discovery',
+    name: 'GitHub Collaboration Network',
     description:
-      'Discover the connections between papers by exploring how research builds upon existing knowledge, linking studies through shared references, methodologies, and findings to create a comprehensive view of academic contributions.',
-    icon: 'https://www.connectedpapers.com/img/ScienceMapping.2218dc18.png',
+      'Explore the GitHub Collaboration Network, where developers connect, share code, and collaborate on projects to drive innovation and solve complex problems together.',
+    icon: 'https://img.alicdn.com/imgextra/i2/O1CN012aZmLu1ss4UHcDQ2T_!!6000000005821-0-tps-2210-1502.jpg',
     link: '/paper-reading',
-    category: 'Knowledge Graph',
+    category: 'Social Network',
     dataset: 'https://github.com/csuvis/CyberAssetGraphData',
   },
   {
-    name: 'GitHub Collaboration Network',
+    name: 'Graph Data Query Scenarios',
     description:
-      'Explore the GitHub Collaboration Network, where developers connect, share code, and collaborate on projects to drive innovation and solve complex problems together.',
+      'Using powerful query languages like Cypher and Gremlin, enabling you to extract meaningful insights from complex networks of interconnected data',
     icon: 'https://www.connectedpapers.com/img/ScienceMapping.2218dc18.png',
+    category: 'Graph Database',
     link: '/paper-reading',
-    category: 'Social Network',
     dataset: 'https://github.com/csuvis/CyberAssetGraphData',
+    github: '',
   },
 ];
 const Home = () => {
@@ -105,11 +114,12 @@ const Home = () => {
 const routes = [
   { path: '/', component: Home },
   { path: '/paper-reading', component: React.lazy(() => import('./paper-reading')) },
+  { path: '/online-visual-tool', component: React.lazy(() => import('./online-visual-tool')) },
 ];
 
 const GraphApps: React.FunctionComponent<IPagesProps> = props => {
-  //   const locale = 'en-US';
-  //   const messages = locales[locale];
+  const locale = 'en-US';
+  const messages = {};
   const routeComponents = routes.map(({ path, component: Component }, index) => {
     return (
       <Route
@@ -139,11 +149,11 @@ const GraphApps: React.FunctionComponent<IPagesProps> = props => {
         },
       }}
     >
-      {/* <IntlProvider messages={messages} locale={locale}> */}
-      <BrowserRouter>
-        <Routes>{routeComponents}</Routes>
-      </BrowserRouter>
-      {/* </IntlProvider> */}
+      <IntlProvider messages={messages} locale={locale}>
+        <BrowserRouter>
+          <Routes>{routeComponents}</Routes>
+        </BrowserRouter>
+      </IntlProvider>
     </ConfigProvider>
   );
 };

examples/graph-apps/src/online-visual-tool/index.tsx

@@ -0,0 +1,104 @@
+import React, { useRef } from 'react';
+
+import { Button } from 'antd';
+
+import { MultipleInstance, Section, useSection, Icons, FullScreen, SegmentedTabs } from '@graphscope/studio-components';
+import {
+  Toolbar,
+  SwitchEngine,
+  PropertiesPanel,
+  Canvas,
+  ZoomFit,
+  ClearStatatus,
+  RunCluster,
+  LoadCSV,
+  StyleSetting,
+} from '@graphscope/studio-graph';
+
+interface QueryGraphProps {}
+
+const ToogleLeftButton = () => {
+  const { toggleLeftSide } = useSection();
+  return (
+    <div>
+      <Button icon={<Icons.Sidebar />} onClick={() => toggleLeftSide()} type="text" />
+    </div>
+  );
+};
+const ToogleRightButton = () => {
+  const { toggleRightSide } = useSection();
+  return (
+    <div>
+      <Button icon={<Icons.Sidebar revert />} onClick={() => toggleRightSide()} type="text" />
+    </div>
+  );
+};
+
+const PaperReading: React.FunctionComponent<QueryGraphProps> = props => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const items = [
+    {
+      key: 'CSV',
+      label: 'CSV',
+      value: 'CSV',
+      children: <LoadCSV />,
+    },
+    {
+      key: 'Style',
+      label: 'Style',
+      value: 'Style',
+      children: <StyleSetting />,
+    },
+  ];
+
+  return (
+    <MultipleInstance>
+      <div
+        style={{
+          background: '#fff',
+          borderRadius: '8px',
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          right: '0px',
+          bottom: '0px',
+        }}
+        ref={containerRef}
+      >
+        <Section
+          splitBorder
+          rightSide={null}
+          leftSide={<SegmentedTabs items={items} block />}
+          autoResize={false}
+          rightSideStyle={{
+            width: '350px',
+          }}
+          leftSideStyle={{
+            width: '380px',
+          }}
+          defaultCollapsed={{
+            leftSide: false,
+            rightSide: true,
+          }}
+        >
+          <Toolbar direction="horizontal" style={{ position: 'absolute', top: '20px', right: 'unset', left: '20px' }}>
+            <ToogleLeftButton />
+          </Toolbar>
+
+          <Canvas />
+
+          <ClearStatatus />
+
+          <Toolbar style={{ position: 'absolute', top: '20px', right: '20px', left: 'unset' }}>
+            <SwitchEngine />
+            <ZoomFit />
+            <RunCluster />
+            <FullScreen containerRef={containerRef} />
+          </Toolbar>
+        </Section>
+      </div>
+    </MultipleInstance>
+  );
+};
+
+export default PaperReading;

package.json

@@ -4,14 +4,15 @@
     "pnpm": "^9"
   },
   "scripts": {
-    "ci": "pnpm i && rm -rf package-lock.json && npm run build && npm run build:site",
+    "prev": "pnpm i && rm -rf package-lock.json",
+    "ci": "npm run prev && npm run build && npm run build:site",
+    "start": "turbo run start",
     "build": "turbo run build --no-cache",
     "build:site": "cd packages/studio-website && npm run build",
-    "start": "turbo run start",
+    "build:examples": "pnpm i && rm -rf package-lock.json && npm run build && cd examples/graph-apps && npm run build:site",
+    "build:docs": "npm run prev && npm run build &&  dumi build",
     "docs": "dumi dev",
-    "docs:build": "pnpm i && rm -rf package-lock.json && npm run build &&  dumi build",
     "version": "changeset version",
-    "logs": "cd packages/studio-website/server && npm run logs",
     "publish": "pnpm publish -r"
   },
   "husky": {

packages/studio-components/package.json

@@ -28,7 +28,7 @@
     "react-resizable-panels": "^2.0.20",
     "sql-ddl-to-json-schema": "latest",
     "typewriter-effect": "^2.21.0",
-    "uuidv4": "latest"
+    "uuid": "latest"
   },
   "publishConfig": {
     "access": "public",

packages/studio-components/src/PropertiesList/utils.ts

@@ -1,4 +1,4 @@
-import { uuid } from 'uuidv4';
+import { v4 as uuidv4 } from 'uuid';
 import { Property } from './typing';
 
 export interface IState {
@@ -17,7 +17,7 @@ let index = 0;
 export default function useStore(): IStore {
   const handleAdd = (state: IState): Property[] => {
     const newProperty = {
-      key: uuid(),
+      key: uuidv4(),
       name: `property_${index++}`,
       type: '',
       primaryKey: false,

packages/studio-components/src/Utils/parseCSV.ts

@@ -1,5 +1,5 @@
 import { inferredGraphFields } from './inferredGraphFields';
-import { uuid } from 'uuidv4';
+import { v4 as uuidv4 } from 'uuid';
 
 export const parseFile = async (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
@@ -136,7 +136,7 @@ export const parseCSV = async (file: File): Promise<ParsedFile> => {
   return {
     meta: { type: 'csv', header, delimiter, size: getFileSize(file.size), name: file.name, graphFields },
     contents,
-    id: uuid(),
+    id: uuidv4(),
   };
 };
 

packages/studio-components/src/Utils/parseJSON.ts

@@ -1,7 +1,7 @@
 import { inferredGraphFields } from './inferredGraphFields';
 import { parseFile, extractHeaderAndDelimiter, getFileSize } from './parseCSV';
 import type { ParsedFile } from './parseCSV';
-import { uuid } from 'uuidv4';
+import { v4 as uuidv4 } from 'uuid';
 
 function byteSize(str) {
   return new Blob([str]).size;
@@ -17,7 +17,7 @@ export const parseJSON = async (file: File): Promise<ParsedFile[]> => {
     const fileString = JSON.stringify(item);
     const size = getFileSize(byteSize(fileString));
     return {
-      id: uuid(),
+      id: uuidv4(),
       contents: fileString,
       data: item,
       meta: {

packages/studio-components/src/Utils/parseSQL.tsx

@@ -1,7 +1,7 @@
 import { Parser } from 'sql-ddl-to-json-schema';
 
 const parser = new Parser('mysql');
-import { uuid } from 'uuidv4';
+import { v4 as uuidv4 } from 'uuid';
 import { parseFile } from './parseCSV';
 import type { ParsedFile } from './parseCSV';
 
@@ -35,7 +35,7 @@ export async function parseSQL(file: File): Promise<ParsedFile[]> {
     const sourceField = inferredSource?.reference.table;
     const targetField = inferredTarget?.reference.table;
     return {
-      id: uuid(),
+      id: uuidv4(),
       meta: {
         type: 'sql',
         size: 'table',

packages/studio-graph/src/components/LoadCSV/index.tsx

@@ -1,9 +1,8 @@
 import React, { useRef } from 'react';
-import ReactDOM from 'react-dom';
 import { Button } from 'antd';
 import { ImportFiles, Utils } from '@graphscope/studio-components';
 import { useContext } from '../../hooks/useContext';
-import { uuid } from 'uuidv4';
+
 import { getStyleConfig, getDataMap } from '../Prepare/utils';
 
 export interface IImportFromCSVProps {}
@@ -116,7 +115,7 @@ const ImportFromJSON: React.FunctionComponent<IImportFromCSVProps> = props => {
       edges: [...edgeSchemas.values()],
     };
 
-    const id = graphId || uuid();
+    const id = graphId || String(new Date());
     const style = getStyleConfig(schema, id);
     updateStore(draft => {
       draft.data = {