Merge pull request #207 from JiKhun/v2-galaxybase

v2-galaxybase

Author: pomelo-nwu

README.md

@@ -74,6 +74,7 @@ npm run start // 启动 G6VP 站点
 | packages/gi-assets-graphscope | `@antv/gi-assets-graphscope` | GraphScope 引擎服务（单机版） |
 | packages/gi-assets-neo4j      | `@antv/gi-assets-neo4j`      | Neo4j 引擎服务                |
 | packages/gi-assets-tugraph    | `@antv/gi-assets-tugraph`    | TuGraph 引擎服务              |
+| packages/gi-assets-galaxybase | `@antv/gi-assets-galaxybase` | Galaxybase 引擎服务           |
 | packages/gi-assets-hugegraph  | `@antv/gi-assets-hugegraph`  | HugeGraph 引擎服务            |
 | packages/gi-cli               | `@antv/gi-cli`               | G6VP 资产 CLI                 |
 | packages/gi-common-components | `@antv/gi-common-components` | 通用组件包                    |

package.json

@@ -16,6 +16,7 @@
     "gi-assets-graphscope": "cd packages/gi-assets-graphscope && npm run build:es",
     "gi-assets-neo4j": "cd packages/gi-assets-neo4j && npm run build:es",
     "gi-assets-tugraph": "cd packages/gi-assets-tugraph && npm run build:es",
+    "gi-assets-galaxybase": "cd packages/gi-assets-galaxybase && npm run build:es",
     "gi-assets-hugegraph": "cd packages/gi-assets-hugegraph && npm run build:es",
     "gi-theme-antd": "cd packages/gi-theme-antd && npm run build:es",
     "build": "npm run build:site && npm run move:dist",

packages/gi-assets-galaxybase/.fatherrc.js

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

packages/gi-assets-galaxybase/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+src/.umi
+dist
+lib
+es

packages/gi-assets-galaxybase/.npmignore

@@ -0,0 +1 @@
+src

packages/gi-assets-galaxybase/.umirc.ts

@@ -0,0 +1,49 @@
+export default {
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  routes: [
+    { exact: true, path: '/', component: 'index' }
+  ],
+  mfsu: {},
+  exportStatic: {
+    htmlSuffix: true,
+    dynamicRoot: true,
+  },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@antv/graphin': 'Graphin',
+    '@antv/g6': 'G6',
+    antd: 'antd',
+    '@antv/g2plot': 'G2Plot',
+    'antd/es/*': 'antd',
+    '@ant-design/charts': 'charts',
+    '@ant-design/icons': 'icons',
+    moment: 'moment',
+    '@antv/gi-sdk': 'GISDK',
+  },
+  scripts: [
+    'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js',
+    'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
+
+    // <!--- Antd DEPENDENCIES-->
+    'https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js',
+    'https://gw.alipayobjects.com/os/lib/moment/2.29.1/moment.js',
+    'https://gw.alipayobjects.com/os/lib/antd/4.20.6/dist/antd.min.js',
+    'https://gw.alipayobjects.com/os/lib/ant-design/charts/1.2.13/dist/charts.min.js',
+    'https://gw.alipayobjects.com/os/lib/ant-design/icons/4.6.4/dist/index.umd.min.js',
+    // <!--- Graphin DEPENDENCIES-->
+    'https://gw.alipayobjects.com/os/lib/antv/g6/4.7.0/dist/g6.min.js',
+    'https://gw.alipayobjects.com/os/lib/antv/graphin/2.7.9/dist/graphin.min.js',
+    // <!--- G2/G2Plot DEPENDENCIES-->
+    'https://gw.alipayobjects.com/os/lib/antv/g2plot/2.4.16/dist/g2plot.min.js',
+    // <!--- GISDK DEPENDENCIES-->
+    'https://gw.alipayobjects.com/os/lib/alipay/graphinsight/2.20.0/dist/index.min.js',
+  ],
+  styles: [
+    // "https://gw.alipayobjects.com/os/lib/antd/4.18.3/dist/antd.min.css",
+    // "https://gw.alipayobjects.com/os/lib/alipay/theme-tools/0.3.0/dist/G6VP/light.css",
+    'https://gw.alipayobjects.com/os/lib/antd/4.23.5/dist/antd.css',
+  ],
+};

packages/gi-assets-galaxybase/LEGAL.md

@@ -0,0 +1,7 @@
+Legal Disclaimer
+
+Within this source code, the comments in Chinese shall be the original, governing version. Any comment in other languages are for reference only. In the event of any conflict between the Chinese language version comments and other language version comments, the Chinese language version shall prevail.
+
+法律免责声明
+
+关于代码注释部分，中文注释为官方版本，其它语言注释仅做参考。中文注释可能与其它语言注释存在不一致，当中文注释与其它语言注释存在不一致时，请以中文注释为准。

packages/gi-assets-galaxybase/README.md

@@ -0,0 +1,112 @@
+# 如何使用 Galaxybase 图数据库
+
+## 什么是Galaxybase？
+
+Galaxybase作为第三代图数据库技术的代表产品，是国内首个成熟、通用、全自主知识产权的商业化图数据库。得益于底层自研数据存储和分布式并行处理架构，解决了大规模关联数据高效存储、查询、计算的难题，较现存同类技术有百倍性能提升，为企业打通数据孤岛、建立以推理为基础的人工智能，提供了从数据迁移、数据建模、数据存储、数据查询、数据运算到数据分析的一站式解决方案。
+
+Galaxybase-Standalone（简称 Galaxybase-S）是Galaxybase的单机版，提供了单机环境下的多种功能。Galaxybase-S免费版限制存储容量，仅供非商业性质的学习使用。也可购买Galaxybase-S付费授权解除存储容量上限。
+
+Galaxybase-S对基础性能设定了一些限制，若想获得Galaxybase的完整性能，请登录[Galaxybase官网](https://www.galaxybase.com) 并联系官方客服。
+
+## 如何使用
+
+Galaxybase-S 的使用详见 [Galaxybase-S 官网文档](https://www.galaxybase.com/document?file=v3.4.1%2Fstandalone-doc)，本文仅介绍如何下载、部署、启动 Galaxybase-S 的服务、导入数据、连接 G6VP。
+
+### 1.下载 Galaxybase-S 包
+
+打开 [Galaxybase官网](https://www.galaxybase.com/) 后登录账号，如没有账号则先注册账号，登录完成后，点击 `下载试用` 按钮， 如下图所示：
+![image.png](./docs/img1.png)
+这时候会来到下载页面，可以根据自己的需求选择对应的版本，我们这里下载的是单机免费版，点击立即下载即可：
+![image.png](./docs/img2.png)
+这时候会得到一个 `galaxybase-standalone.tar.gz` 包。
+
+### 2. 部署、启动 Galaxybase-S 包
+
+关于部署、启动可以参考 [Galaxybase-S 安装视频](https://www.bilibili.com/video/BV1iY4y1F7Hn/) 或 [Galaxybase-S 部署文档](https://www.galaxybase.com/document?file=v3.4.1%2Fstandalone-doc&docid=26)，这两份资料都有非常详细的部署教程。
+
+### 3. 导入数据
+
+启动好图服务之后，首先需点击下载 [模型文件、映射文件、数据文件](https://galaxybase.com/public/download/MovieDemo.zip)，下载完成后，我们把该文件解压，将里面的内容放到docker包解压后的文件下，路径如：`/root/galaxybase-20220721170804/bin/home/graph/data`，
+![image.png](./docs/img15.png)
+放置好文件后，我们回到控制台中，首先cd到`/root/galaxybase-20220721170804/bin`目录下，
+![image.png](./docs/img16.png)
+
+接着需要用到galaxybase-load工具进行加载图，输入以下命令：
+
+```
+./galaxybase-load -g MovieDemo -s home/graph/data/MovieDemo_Schema.json -m home/graph/data/MovieDemo_Mapping.json --disableStudio
+```
+
+galaxybase-load工具使用可参考 [Galaxybase图构建数据导入工具文档](https://galaxybase.com/document?file=v3.4.1%2Fstandalone-doc&docid=76)。
+
+加载完成后如下图所示：
+![image.png](./docs/img17.jpg)
+
+
+
+
+### 4. 启动 G6VP 服务
+
+克隆 G6VP 代码：
+
+```
+git clone https://github.com/antvis/G6VP.git
+```
+
+安装依赖：
+
+```
+pnpm install
+```
+
+启动站点
+```
+npm run start
+```
+
+### 5. 连接 G6VP
+
+G6VP 服务启动成功后，打开地址 [http://localhost:8000](http://localhost:8000)，在表单中填写下面信息：
+
+- 平台地址：即 Galaxybase 的图服务地址，默认端口为18088，若服务器地址为：192.168.1.1，则该地址为：`http://192.168.1.1:18088`
+- 账号：即 Galaxybase 图数据库的账号，默认为admin
+- 密码：即 Galaxybase 图数据库的密码，默认为admin
+![image.png](./docs/img3.png)
+
+点击「开始连接」，若成功连接，右上方将出现下图提示，下方将出现「选择子图」 panel：
+
+![image.png](./docs/img4.png)
+
+「选择子图」的下拉框中列举了该 Galaxybase 服务中的所有图名称，选择其中一个，然后在「数据名称」中为当前创建的 G6VP 数据集起一个名字，下图例子中起名为“galaxybase-dataset1”：
+
+![image.png](./docs/img5.jpg)
+![image.png](./docs/img6.png)
+
+再点击「进入分析」，即可创建数据集成功，页面将跳转到「数据集」模块，您将在数据集列表中看到刚刚创建的名为“galaxybase-dataset1” G6VP 数据集：
+
+![image.png](./docs/img7.jpg)
+
+点击操作中的创建画布icon按钮，即使用该数据集创建工作簿，此时，页面跳转到新建工作簿页面，数据集和模版已为您填充好，在「工作簿名称」输入框为该该工作簿起一个名称，然后点击「创建画布」，即可进入工作簿。
+
+![image.png](./docs/img8.png)
+
+点击「创建画布」后：
+
+![image.png](./docs/img9.png)
+
+### 6. 分析数据
+
+此时，您已经完成了 Galaxybase 数据库的连接和数据、工作簿的创建，可以在刚刚新建的工作簿中进行数据分析了。在右侧可以看到Cypher语句查询模块，输入 Cypher 查询语句，例如下图中的 `MATCH (n) RETURN n LIMIT 10`，可以成功查询到十个节点：
+![image.png](./docs/img11.png)
+这时候可以通过左侧的样式面板来对图上的节点进行修改。
+
+单击一个节点，可查询其详情，并显示在属性面板中：
+![image.png](./docs/img12.png)
+
+选择一个或多个节点，在节点的右键菜单中，选择「一度扩展」，进行该节点的邻居查询：
+
+![image.png](./docs/img13.jpg)
+
+扩展结果：
+
+![image.png](./docs/img14.jpg)

packages/gi-assets-galaxybase/docs/img1.png

@@ -0,0 +1,58 @@
+{
+  "name": "@antv/gi-assets-galaxybase",
+  "version": "1.0.0",
+  "description": "Galaxybase 团队的图分析资产包",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "dist",
+    "es"
+  ],
+  "scripts": {
+    "build": "npm run clean && father build & npm run build:umd",
+    "build:es": "father build",
+    "build:umd": "webpack  --mode production  -c ../../webpack.config.js --env path=/packages/gi-assets-galaxybase",
+    "build:umd:watch": "node ./node_modules/webpack/bin/webpack.js  --mode production  -c ./webpack.config.js --env watch=true",
+    "clean": "rimraf es esm lib dist",
+    "dev": "umi dev",
+    "docs": "dumi dev",
+    "prettier": "prettier --write ./src/**/**/**/*.js",
+    "remove:antd": "rm -rf ./node_modules/antd",
+    "start": "npm run clean && father build --watch",
+    "test": "jest",
+    "npm:publish": "npm run build && node ../../scripts/publish_backup.js && npm publish && node ../../scripts/publish_recover.js"
+  },
+  "resolutions": {
+    "antd": "4.x"
+  },
+  "dependencies": {
+    "@antv/gi-sdk": "workspace:*",
+    "@ant-design/icons": "^4.6.2",
+    "@antv/graphin": "2.x",
+    "@antv/graphin-icons": "^1.0.0",
+    "antd": "4.x",
+    "codemirror": "^5.25.0",
+    "monaco-editor": "^0.34.0",
+    "react": "17.x",
+    "react-monaco-editor": "^0.48.0",
+    "umi-request": "^1.4.0",
+    "use-immer": "^0.7.0",
+    "node-rsa": "^1.1.1",
+    "qs": "^6.5.3"
+  },
+  "devDependencies": {
+    "dumi": "^1.1.38",
+    "father": "^2.30.6",
+    "mini-css-extract-plugin": "^2.3.0",
+    "rimraf": "^3.0.2",
+    "umi": "^3.5.20",
+    "webpack": "^5.53.0",
+    "webpack-cli": "^4.8.0"
+  },
+  "peerDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/gi-assets-galaxybase/docs/img10.png

@@ -0,0 +1,7 @@
+.gi-action-list {
+  display: flex;
+  padding: 6px 0px;
+  .list-title {
+    flex: 1;
+  }
+}

packages/gi-assets-galaxybase/docs/img11.png

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import './index.less';
+interface ActionListProps {
+  title: string;
+  extra: React.ReactNode;
+}
+
+const ActionList: React.FunctionComponent<ActionListProps> = props => {
+  const { title, extra } = props;
+  return (
+    <div className="gi-action-list">
+      <div className="list-title">{title}</div>
+      <div className="list-extra">{extra}</div>
+    </div>
+  );
+};
+
+export default ActionList;

packages/gi-assets-galaxybase/docs/img12.png

@@ -0,0 +1,21 @@
+.gi-collapse-card {
+  margin: 8px;
+  // padding: 12px;
+  .ant-collapse {
+    box-sizing: border-box;
+    width: 100%;
+    background-color: var(--component-background);
+    border: none;
+    border-radius: 8px;
+    box-shadow: -1px -1px 4px 0 rgba(223, 223, 223, 0.5), -2px 2px 4px 0 rgba(244, 244, 244, 0.5),
+      2px 3px 8px 2px rgba(151, 151, 151, 0.05);
+    .ant-collapse-item {
+      padding: 4px;
+      border: none;
+    }
+  }
+  .ant-collapse-content {
+    padding: 4px;
+    border: none;
+  }
+}

packages/gi-assets-galaxybase/docs/img13.jpg

@@ -0,0 +1,36 @@
+import { CaretRightOutlined } from "@ant-design/icons";
+import { Collapse } from "antd";
+import * as React from "react";
+import "./index.less";
+
+const { Panel } = Collapse;
+
+interface CollapseCardProps {
+  title: string;
+  extra?: React.ReactNode;
+  children: React.ReactNode;
+  defaultActive?: boolean;
+}
+
+const CollapseCard: React.FunctionComponent<CollapseCardProps> = (props) => {
+  const { title, extra, children, defaultActive } = props;
+  const defaultActiveKey = defaultActive !== false ? ["card"] : [];
+  return (
+    <div className="gi-collapse-card">
+      <Collapse
+        defaultActiveKey={defaultActiveKey}
+        collapsible="header"
+        expandIcon={({ isActive }) => (
+          <CaretRightOutlined rotate={isActive ? 90 : 0} />
+        )}
+        bordered={false}
+      >
+        <Panel key="card" header={title} extra={extra}>
+          {children}
+        </Panel>
+      </Collapse>
+    </div>
+  );
+};
+
+export default CollapseCard;

packages/gi-assets-galaxybase/docs/img14.jpg

@@ -0,0 +1,16 @@
+.container-header {
+  height: 56px;
+  padding: 0px 12px;
+  color: #000000;
+  font-size: 18px;
+
+  line-height: 56px;
+  letter-spacing: -0.3px;
+
+  & > span:last-child {
+    float: right;
+    color: var(--primary-color);
+    font-size: 14px;
+    cursor: pointer;
+  }
+}

packages/gi-assets-galaxybase/docs/img15.png

@@ -0,0 +1,20 @@
+import * as React from "react";
+import "./index.less";
+
+interface ContainerHeaderProps {
+  title: string;
+}
+
+const ContainerHeader: React.FunctionComponent<ContainerHeaderProps> = (
+  props
+) => {
+  const { title } = props;
+  return (
+    <div className="container-header">
+      <span>{title} </span>
+      <span></span>
+    </div>
+  );
+};
+
+export default ContainerHeader;