feat: graphscope example

packages/graphin-graphscope/.fatherrc.js

@@ -0,0 +1,5 @@
+export default {
+  entry: './src/index.tsx',
+  esm: 'babel',
+  cjs: 'babel',
+};

packages/graphin-graphscope/docs/demo/index.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import GraphScopeComponent from '@antv/graphin-graphscope';
+import { Utils } from '@antv/graphin';
+
+const originData = Utils.mock(5)
+  .circle()
+  .graphin();
+
+originData.nodes[0].style = {
+  keyshape: {
+    size: [20, 20],
+  },
+};
+
+export default () => {
+  const [data, setData] = useState(originData);
+  const domRef = React.useRef(null);
+
+  const queryNeighbors = (nodeId: string, degree: number) => {
+    debugger;
+    const model = data.nodes.filter(node => node.id === nodeId);
+    const newData = Utils.mock(3)
+      .expand(model)
+      .graphin();
+
+    setData({
+      nodes: [...data.nodes, ...newData.nodes],
+      edges: [...data.edges, ...newData.edges],
+    } as any);
+  };
+
+  console.log('------原始shuju', data);
+  return (
+    <div>
+      <div ref={domRef}></div>
+      <GraphScopeComponent graphDOM={domRef.current} data={data} width={1000} height={400} neighbors={queryNeighbors} />
+    </div>
+  );
+};

packages/graphin-graphscope/docs/index.md

@@ -0,0 +1,19 @@
+---
+title: GraphScope 演示
+group:
+  path: /demo
+nav:
+  title: GraphScope
+  path: /graphscope
+  order: 1
+---
+
+## 基本介绍
+
+内置的 Graphin 节点
+
+## Typescript
+
+### Graphin Circle
+
+<code src='./demo/index.tsx'>

packages/graphin-graphscope/package.json

@@ -2,10 +2,12 @@
   "name": "@antv/graphin-graphscope",
   "version": "0.0.1",
   "description": "An Example for GraphScope",
-  "main": "dist/app.js",
+  "main": "src/index.tsx",
   "scripts": {
     "start": " node --max_old_space_size=8192 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --env.NODE_ENV=development",
-    "build": "rimraf dist && node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js  --env.NODE_ENV=production  -c ./webpack.config.js ",
+    "build": "npm run clean && father build",
+    "build:umd": "rimraf dist && node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js  --env.NODE_ENV=production  -c ./webpack.config.js ",
+    "clean": "rimraf es esm lib dist",
     "deploy": "npm run build && gh-pages -d ./dist -r https://github.com/antvis/graphin-studio-site.git"
   },
   "dependencies": {
@@ -16,32 +18,29 @@
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
+    "@ant-design/icons": "^4.3.0",
     "@babel/cli": "^7.6.2",
     "@babel/core": "^7.6.2",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
     "@types/react-router-dom": "^5.1.0",
+    "antd": "^4.10.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.13.0",
     "css-loader": "^3.2.0",
-    "deepmerge": "^4.1.1",
+    "father": "^2.30.1",
     "file-loader": "^4.2.0",
     "gh-pages": "^2.1.1",
-    "html-webpack-plugin": "^3.2.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
-    "mini-css-extract-plugin": "^0.8.0",
     "prettier": "^1.18.2",
+    "react-hot-loader": "^4.13.0",
     "rimraf": "^3.0.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
     "ts-loader": "^6.1.2",
-    "typescript": "^3.6.4",
-    "webpack": "^4.41.0",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1"
+    "typescript": "^3.6.4"
   },
   "keywords": [
     "example",

packages/graphin-graphscope/src/contextmenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GraphinContext, Utils } from '@antv/graphin';
+import { GraphinContext } from '@antv/graphin';
 import { ContextMenu } from '@antv/graphin-components';
 
 const { Menu } = ContextMenu;