Import valtio to optimize rendering and improve performance

.gitignore

@@ -49,6 +49,8 @@ packages/gi-assets-tugraph-analytics/dist
 # do not ignore gi-portal dist
 packages/gi/dist
 packages/gi-common-components/dist
+
+packages/graphin
 
 build
 

.umirc.js

@@ -0,0 +1,108 @@
+import { join } from 'path';
+const isProduction = process.env.NODE_ENV === 'production';
+
+export default {
+  title: 'G6VP',
+  mode: 'site',
+  base: '/',
+  publicPath: '/',
+  logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+  favicon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+  // sitemap: {
+  //   hostname: 'graphin.antv.vision',
+  // },
+  extraBabelIncludes: ['@antv/dumi-theme-antv'],
+  resolve: {
+    includes: [
+      // 'packages/graphin/docs/*.md',
+      // 'packages/graphin/docs/render/data/',
+      // 'packages/graphin/docs/render/element/',
+      // 'packages/graphin/docs/features/',
+
+      'packages/gi-sdk/docs',
+      'packages/gi-assets-basic/src/components/',
+      'packages/gi-assets-advance/src/components/',
+      'packages/gi-assets-algorithm/src/',
+      // 'packages/gi-assets-scene/src/',
+
+      // 'packages/graphin-components/src/',
+      // 'packages/graphin-graphscope/docs/',
+      /** local develop */
+      // 'packages/graphin-components/src/VisSettingPanel',
+    ],
+  },
+  alias: {
+    '@antv/graphin': join(__dirname, 'packages', 'graphin'),
+    '@antv/gi-sdk': join(__dirname, 'packages', 'gi-sdk'),
+    '@antv/gi-assets-basic': join(__dirname, 'packages', 'gi-assets-basic'),
+  },
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true,
+      },
+    ],
+  ],
+  metas: [
+    {
+      name: 'keywords',
+      content: 'graphin,g6,graph,Graphin,AntV Graph',
+    },
+  ],
+
+  navs: [
+    null,
+    {
+      title: '快速体验',
+      path: 'https://insight.antv.antgroup.com',
+    },
+  ],
+
+  analytics: isProduction ? { ga: 'UA-148148901-8' } : false,
+  hash: true,
+  ssr: {
+    devServerRender: false,
+  },
+  exportStatic: {},
+  externals: {
+    react: 'window.React',
+    'react-dom': 'window.ReactDOM',
+    antd: 'window.antd',
+    '@antv/g6': 'window.G6V5',
+  },
+  workerLoader: {},
+  webpack5: {},
+  targets: {
+    chrome: 80,
+    firefox: false,
+    safari: false,
+    edge: false,
+    ios: false,
+  },
+  theme: {
+    '@s-site-menu-width': '280px',
+    '@primary-color': '#873bf4',
+  },
+  locales: [
+    ['zh-CN', '中文'],
+    ['en-US', 'English'],
+  ],
+  links: [
+    'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css',
+    'https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.4.36/dist/index.css',
+  ],
+  scripts: [
+    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
+    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
+    'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd-with-locales.js',
+
+    /** G6 **/
+    'http://127.0.0.1:9001/g6.min.js',
+
+    /** lodash */
+    'https://gw.alipayobjects.com/os/lib/lodash/4.17.20/lodash.min.js',
+  ],
+};

package.json

@@ -4,12 +4,14 @@
     "pnpm": "^8"
   },
   "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "postinstall": "npm run build:all:es",
+    "preinstall": "npx only-allow pnpm && npm run add-gitmodule-graphin",
+    "add-gitmodule-graphin": "test -d packages/graphin/.git || git clone -b v3 https://github.com/antvis/Graphin.git packages/graphin",
+    "setup:tugraph-db": "node scripts/setupProject.js https://github.com/TuGraph-family/gi-assets-tugraph-db.git packages/gi-assets-tugraph-db",
     "build:all:es": "turbo run build:es",
     "build:all:umd": "turbo run build:umd --no-cache",
     "start": "cd packages/gi-site && npm run start",
     "clean": "pnpm run -r clean",
+    "docs": "NODE_OPTIONS=--max_old_space_size=4098 && dumi dev",
     "publish": "pnpm publish -r --registry=https://registry.npmjs.org",
     "cdn": "node ./scripts/publish_yuyan.mjs",
     "tar:gi-httpservice": "node scripts/tar_httpservice.mjs && cd packages/gi-httpservice-xxx  && npm install && npm run build:docker && npm run tar && cd ../../ && node scripts/rm_httpservice.mjs",
@@ -39,14 +41,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@antv/algorithm": "^0.1.26-beta.0",
-    "@antv/g6": "5.0.0-beta.5",
-    "@antv/graphin": "workspace:*",
-    "@antv/layout": "^0.3.22",
-    "@antv/s2": "^1.48.0",
-    "@antv/s2-react": "^1.41.0",
-    "@antv/util": "^3.2.5",
+    "@antv/g6": "5.0.0-beta.27",
     "antd": "4.x",
+    "babel-plugin-import": "^1.13.8",
     "buffer": "^6.0.3",
     "buffer-browserify": "^0.2.5",
     "node-fetch": "^3.3.0",
@@ -56,12 +53,14 @@
     "umi": "3.x"
   },
   "devDependencies": {
+    "@antv/dumi-theme-antv": "0.2.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@changesets/cli": "^2.26.1",
     "@types/react": "17.x",
     "@types/react-dom": "17.x",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.8.1",
+    "dumi": "^1.1.35",
     "father": "^2.30.23",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.3",
@@ -73,6 +72,7 @@
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
     "turbo": "^1.8.3",
+    "typescript": "^5.1.6",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.0.0"
   }

packages/gi-assets-advance/package.json

@@ -35,6 +35,9 @@
     "@antv/gi-common-components": "workspace:*",
     "@antv/gi-sdk": "workspace:*",
     "@antv/graphin-icons": "^1.0.0",
+    "@antv/layout": "^0.3.24",
+    "@antv/s2": "^1.52.0",
+    "@antv/s2-react": "^1.44.2",
     "@antv/util": "^3.2.5",
     "@uiw/react-markdown-preview": "^4.1.13",
     "ace-gremlin-editor": "^0.0.14",

packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx

@@ -10,8 +10,10 @@ export interface AddSheetbarProps {
 }
 
 const AddSheetbar: React.FunctionComponent<AddSheetbarProps> = props => {
-  const { handleAddSheetbar, graph } = useContext();
-
+  const { context, graph } = useContext<{
+    handleAddSheetbar: (options: any) => void;
+  }>();
+  const { handleAddSheetbar } = context;
   const { GIAC, isRelayout } = props;
   const handleClick = React.useCallback(() => {
     const nodes = graph.findAllByState('node', 'selected').map(c => {
@@ -43,11 +45,7 @@ const AddSheetbar: React.FunctionComponent<AddSheetbarProps> = props => {
       });
   }, [graph, handleAddSheetbar, isRelayout]);
 
-  return (
-    <>
-      <GIAComponent GIAC={GIAC} onClick={handleClick} />
-    </>
-  );
+  return <GIAComponent GIAC={GIAC} onClick={handleClick} />;
 };
 
 export default memo(AddSheetbar);

packages/gi-assets-advance/src/components/AjustLayout/Component.tsx

@@ -153,7 +153,8 @@ const AjustLayout: React.FC<IGremlinQueryProps> = ({ visible, onClose, serviceId
   });
 
   // const { services, dispatch, GiState, setGiState } = GraphinContext as any;
-  const { graph, services, data, updateContext } = useContext();
+  const { graph, services, updateContext, context } = useContext();
+  const { data } = context;
 
   React.useEffect(() => {
     const onNodeSelectChange = e => {

packages/gi-assets-advance/src/components/AjustLayout/index.md

@@ -1,26 +1,30 @@
-## AjustLayout 子图布局
+---
+title: 子图布局
+order: 0
+group:
+  title: 高级资产
+  path: /advance
+nav:
+  title: 资产包
+  path: /assets
+  order: 1
+---
 
 ```jsx
-import TestSDK, { Mock } from '@antv/gi-assets-testing';
-import { Utils } from '@antv/graphin';
 import * as React from 'react';
+import { GISDK_TEST } from '@antv/gi-sdk';
+import * as Assets from '@antv/gi-assets-basic';
 import Asset from './index.tsx';
 
-const services = [
-  {
-    id: 'GI_SERVICE_INTIAL_GRAPH',
-    service: params => {
-      return new Promise(resolve => {
-        resolve(Utils.mock(20).tree().graphin());
-      });
-    },
-  },
-];
+const { registerMeta, info } = Asset;
+const { id } = info;
 
-const App = props => {
+Assets.components[id] = Asset;
+
+const App = () => {
   return (
     <div>
-      <TestSDK asset={Asset} services={services} type="GIAC_CONTENT" />
+      <GISDK_TEST assets={Assets} activeAssets={[info]} />
     </div>
   );
 };

packages/gi-assets-advance/src/components/AnalysisHistory/Component.tsx

@@ -21,7 +21,8 @@ export interface AnalysisHistoryProps {
 }
 
 const AnalysisHistory: React.FC<AnalysisHistoryProps> = props => {
-  const { GISDK_ID, history, graph, services } = useContext();
+  const { GISDK_ID, context, graph, services } = useContext<{ history: any }>();
+  const { history } = context;
   const {
     height,
     placement,

packages/gi-assets-advance/src/components/AnalysisHistory/TemplateDrawer.tsx

@@ -1,16 +1,16 @@
+import { CaretRightOutlined, PauseOutlined, RedoOutlined } from '@ant-design/icons';
 import { useContext } from '@antv/gi-sdk';
+import { useMemoizedFn } from 'ahooks';
+import { Button, Drawer, Form, Select, Tooltip } from 'antd';
 import * as React from 'react';
 import { useImmer } from 'use-immer';
-import { CaretRightOutlined, PauseOutlined, RedoOutlined } from '@ant-design/icons';
-import { Button, Drawer, Form, Select, Tooltip } from 'antd';
-import FlowGraph from './FlowGraph';
 import ConfigurePanel from './ConfigurePanel';
+import FlowGraph from './FlowGraph';
 import { TemplateData, TemplateNode } from './type';
-import { useMemoizedFn } from 'ahooks';
 
+import $i18n from '../../i18n';
 import './index.less';
 import { updateObjWithPaths } from './util';
-import $i18n from '../../i18n';
 
 let stepTimer: any = 0;
 
@@ -32,7 +32,8 @@ type RunningStatus = 'none' | 'running' | 'success' | 'failed' | 'finish' | unde
  */
 const TemplateDrawer: React.FC<TemplateDrawerProps> = props => {
   const { open, templates, urlMap, handleClose, handleUpdateConfigure } = props;
-  const { updateContext, history } = useContext();
+  const { updateContext, context } = useContext<{ history: any }>();
+  const { history } = context;
 
   const [state, updateState] = useImmer({
     activeTemplateId: undefined as string | undefined,
@@ -217,7 +218,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = props => {
     });
     let foundComponent = false;
     updateContext(draft => {
-      draft.config.components.forEach(item => {
+      draft.components.forEach(item => {
         if (lastComponentId && item.id === lastComponentId) {
           item.props.controlledValues = undefined;
         }

packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx

@@ -1,16 +1,16 @@
+import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons';
 import { useContext } from '@antv/gi-sdk';
 import { createUuid } from '@antv/gi-sdk/lib/process/common';
+import { Button, Empty, Form, Input, Modal, Popover, Timeline, Tooltip } from 'antd';
+import { original } from 'immer';
 import * as React from 'react';
 import { useImmer } from 'use-immer';
-import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons';
-import { Button, Empty, Form, Input, Modal, Popover, Timeline, Tooltip } from 'antd';
-import { ColorMap, LabelMap, circleNodeStyle, getHistoryNode } from './util';
+import $i18n from '../../i18n';
 import FlowGraph from './FlowGraph';
 import ParamterizePanel from './ParamterizePanel';
-import { original } from 'immer';
-import { TemplateData, TemplateNode } from './type';
 import './index.less';
-import $i18n from '../../i18n';
+import { TemplateData, TemplateNode } from './type';
+import { ColorMap, LabelMap, circleNodeStyle, getHistoryNode } from './util';
 
 export interface TemplateModalProps {
   // 沉淀历史弹窗是否打开
@@ -32,7 +32,8 @@ export interface TemplateModalProps {
  */
 const TemplateModal: React.FC<TemplateModalProps> = props => {
   const [form] = Form.useForm();
-  const { history } = useContext();
+  const { context } = useContext<{ history: any }>();
+  const { history } = context;
   const { open, urlMap, handleSave, handleClose } = props;
 
   const [state, updateState] = useImmer({

packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx

@@ -473,7 +473,7 @@ export const createFlowGraph = (container, tooltip, isConfigure) => {
     container,
     width,
     height,
-    animate: true,
+    animated: true,
     plugins: [tooltip],
     modes: {
       default: [