Initial commit

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.eslintrc

+{
+  "extends": "eslint-config-umi"
+}

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+.idea
+/.vscode
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local

.prettierignore

+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

.prettierrc

+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

.umirc.ts

+import { defineConfig } from 'umi'
+
+export default defineConfig({
+  publicPath: './',
+  routes: [
+    { path: '/', component: '@/pages/index' },
+    { path: '/apps/dag', component: '@/pages/index' },
+  ],
+  theme: {
+    '@ant-prefix': 'ant',
+    '@menu-item-active-bg': '#f0f5ff',
+  },
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: '@antv/x6-react-components',
+        libraryDirectory: 'es',
+        transformToDefaultImport: false,
+        style: true,
+      },
+    ],
+  ],
+})

README.md

+# X6 DAG React demo project
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn
+```
+
+Start the dev server,
+
+```bash
+$ yarn start
+```

package.json

+{
+  "private": true,
+  "name": "@antv/x6-app-dag",
+  "version": "1.1.6",
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "lint": "umi-lint --eslint src/ -p.no-semi  --prettier --fix",
+    "test:coverage": "umi-test --coverage"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.2.1",
+    "@antv/x6": "^1.28.1",
+    "@antv/x6-react-components": "^1.1.14",
+    "@antv/x6-react-shape": "^1.5.2",
+    "@types/dompurify": "^2.0.4",
+    "@types/lodash-es": "^4.17.5",
+    "@types/marked": "^3.0.2",
+    "ahooks": "^2.7.0",
+    "antd": "^4.4.2",
+    "babel-plugin-import": "^1.13.3",
+    "classnames": "^2.2.6",
+    "dompurify": "^2.1.1",
+    "marked": "^3.0.8",
+    "react": "^16.13.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dom": "^16.13.1",
+    "umi-lint": "^2.0.2"
+  },
+  "devDependencies": {
+    "@ant-design/pro-layout": "^5.0.12",
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "^3.2.19",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
+    "umi": "^3.2.19",
+    "yorkie": "^2.0.0"
+  }
+}

src/common/hooks/useObservableState.ts

+import React, { useEffect, useMemo, useState } from 'react'
+import { BehaviorSubject, Observable } from 'rxjs'
+
+export const useObservableState = <T extends any>(
+  source$: Observable<T> | { (): Observable<T> },
+  initialState?: T,
+): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const source = useMemo<Observable<T>>(() => {
+    if (typeof source$ === 'function') {
+      return source$()
+    }
+    return source$
+  }, [source$])
+  const [state, setState] = useState<T>(() => {
+    if (source instanceof BehaviorSubject) {
+      return source.getValue()
+    }
+    return initialState
+  })
+  useEffect(() => {
+    const sub = source.subscribe((v) => {
+      setState(v)
+    })
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [source])
+  return [state, setState]
+}

src/common/utils.ts

+export { unescape } from 'lodash-es'
+
+export class Deferred<T> {
+  resolve!: (value?: T) => void
+
+  reject!: (err?: any) => void
+
+  promise: Promise<T>
+
+  constructor() {
+    this.promise = new Promise<T>((resolve, reject) => {
+      this.resolve = resolve
+      this.reject = reject
+    })
+  }
+}
+
+// 解析 JSON 字符串不引起报错
+export const safeJson = (jsonStr = '{}', defaultVal = {}) => {
+  try {
+    return JSON.parse(jsonStr)
+  } catch (error) {
+    console.warn(`${jsonStr} is not valid json`)
+    return defaultVal
+  }
+}
+
+export class CodeName {
+  static parse(codeName = '') {
+    return codeName.replace(/_\d+$/, '').toLocaleLowerCase()
+  }
+
+  static equal(c1: string, c2: string) {
+    return CodeName.parse(c1) === CodeName.parse(c2)
+  }
+
+  static some(list: string[], c2: string) {
+    return list.some((c1) => CodeName.equal(c1, c2))
+  }
+
+  static getFromNode(node: any = {}) {
+    const { codeName = '' } = node
+    return CodeName.parse(codeName)
+  }
+}
+
+export const isPromise = (obj: any) =>
+  !!obj &&
+  (typeof obj === 'object' || typeof obj === 'function') &&
+  typeof obj.then === 'function'

src/component/cut.less

+.no-wrap {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: middle;
+}

src/component/cut.tsx

+import React, { useCallback } from 'react'
+import styles from './cut.less'
+
+interface Props {
+  left: number
+  right: number
+  max: number
+  children: string
+}
+
+export const Cut: React.FC<Props> = (props) => {
+  const { left, right = 0, max, children } = props
+  const getText = useCallback(() => {
+    const len = children.length
+    const ellipsis = '...'
+    let leftStr = ''
+    let rightStr = ''
+
+    if (len > max) {
+      if (left && len) {
+        leftStr = children.substr(0, left)
+      } else {
+        leftStr = children.substr(0, max)
+      }
+
+      if (right) {
+        rightStr = children.substr(-right, right)
+      }
+
+      return `${leftStr}${ellipsis}${rightStr}`
+    }
+
+    return children
+  }, [left, right, max, children])
+  return <span className={styles['no-wrap']}>{getText()}</span>
+}

src/component/item-name.tsx

+import React from 'react'
+import { unescape } from 'lodash-es'
+import { Cut } from '@/component/cut'
+import { Keyword } from '@/component/keyword'
+
+interface Props {
+  data: any
+}
+
+export const ItemName: React.FC<Props> = (props) => {
+  const { data } = props
+  const { keyword, cutParas = {} } = data
+  const name = unescape(data.name)
+  const { max, side } = cutParas
+  if (keyword) {
+    return <Keyword raw={name} keyword={keyword} />
+  }
+  if (max) {
+    return (
+      <Cut max={max} left={side} right={side}>
+        {name}
+      </Cut>
+    )
+  }
+  return <span>{name}</span>
+}

src/component/keyword.less

+.keywordWrapper {
+  strong {
+    color: #dd4b39;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/component/keyword.tsx

+import React from 'react'
+import classnames from 'classnames'
+import styles from './keyword.less'
+
+interface Props {
+  raw: string
+  keyword: string
+  className?: string
+}
+
+export const Keyword: React.FC<Props> = (props) => {
+  const { raw, keyword, className } = props
+  if (keyword) {
+    const regex = new RegExp(keyword, 'ig')
+    const arr = raw.split(regex)
+    return (
+      <span
+        className={classnames({
+          [styles.keywordWrapper]: true,
+          [className!]: !!className,
+        })}
+      >
+        {arr.map((section, index) =>
+          index !== arr.length - 1 ? (
+            <span key={section + index}>
+              {section}
+              <strong>{keyword}</strong>
+            </span>
+          ) : (
+            section
+          ),
+        )}
+      </span>
+    )
+  }
+  return null
+}

src/component/modal/index.tsx

+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Modal, ConfigProvider } from 'antd'
+import { ModalFuncProps, ModalProps } from 'antd/es/modal'
+import { isPromise } from '@/common/utils'
+import { ANT_PREFIX } from '@/constants/global'
+
+type ShowProps = ModalProps & {
+  afterClose?: (...args: any[]) => void
+  children: React.ReactNode
+}
+
+export const showModal = (props: ShowProps) => {
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+
+  let config: ShowProps = {
+    ...props,
+    visible: true,
+    onCancel: close,
+    onOk: (e) => {
+      if (typeof props.onOk === 'function') {
+        const ret = props.onOk(e)
+        if (isPromise(ret as any)) {
+          ;(ret as any).then(() => {
+            close()
+          })
+        }
+      } else {
+        close()
+      }
+    },
+  }
+
+  function destroy(...args: any[]) {
+    const unmountResult = ReactDOM.unmountComponentAtNode(div)
+    if (unmountResult && div.parentNode) {
+      div.parentNode.removeChild(div)
+    }
+    if (typeof props.afterClose === 'function') {
+      props.afterClose(...args)
+    }
+  }
+
+  function update(newConfig: ModalFuncProps) {
+    config = {
+      ...config,
+      ...newConfig,
+    }
+    render(config)
+  }
+
+  function close(...args: any[]) {
+    const nextConfig = {
+      ...config,
+      visible: false,
+      afterClose: destroy.bind(undefined, ...args),
+    }
+    update(nextConfig)
+  }
+
+  function render(usedConfig: ModalProps & { children: React.ReactNode }) {
+    const { children, ...others } = usedConfig
+    setTimeout(() => {
+      ReactDOM.render(
+        <ConfigProvider prefixCls={ANT_PREFIX}>
+          <Modal {...others}>{children}</Modal>
+        </ConfigProvider>,
+        div,
+      )
+    }, 0)
+  }
+
+  render(config)
+
+  return {
+    close,
+    update,
+  }
+}

src/component/rx-component/rx-input.tsx

+import React from 'react'
+import { Observable } from 'rxjs'
+import { Input, ConfigProvider } from 'antd'
+import { InputProps } from 'antd/es/input'
+import { useObservableState } from '@/common/hooks/useObservableState'
+import { ANT_PREFIX } from '@/constants/global'
+
+interface RxInputProps extends Omit<InputProps, 'value'> {
+  value: Observable<string>
+}
+
+export const RxInput: React.FC<RxInputProps> = (props) => {
+  const { value, ...otherProps } = props
+  const [realValue] = useObservableState(() => value)
+  return (
+    <ConfigProvider prefixCls={ANT_PREFIX}>
+      <Input value={realValue} {...otherProps} />
+    </ConfigProvider>
+  )
+}

src/constants/global.ts

+export const ANT_PREFIX = 'ant'

src/constants/graph.ts

+export const GROUP_HORIZONTAL__PADDING = 24 // 分组横向 padding
+export const GROUP_VERTICAL__PADDING = 40 // 分组纵向 padding
+export const NODE_WIDTH = 180
+export const NODE_HEIGHT = 32
+
+// 触发画布重新渲染事件
+export const RERENDER_EVENT = 'RERENDER_EVENT'
+
+/*
+ * 以下是拖拽相关
+ */
+
+export const DRAGGABLE_ALGO_COMPONENT = 'ALGO_COMPONENT'
+export const DRAGGABLE_MODEL = 'MODEL'

src/mock/algo.ts

+export const algoData = [
+  {
+    id: 'recentlyUsed',
+    name: '最近使用',
+    isDir: true,
+    children: [
+      {
+        id: 10,
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'algo_1',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '算法组件1',
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'algo_1',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '算法组件1',
+          id: 10,
+        },
+      },
+      {
+        id: 11,
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'algo_2',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '算法组件2',
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'algo_2',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '算法组件2',
+          id: 11,
+        },
+      },
+      {
+        id: 12,
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'algo_3',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '算法组件3',
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'algo_3',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '算法组件3',
+          id: 12,
+        },
+      },
+    ],
+  },
+  {
+    name: '数据读写',
+    id: 21,
+    category: 'source',
+    isDir: true,
+    children: [
+      {
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'odps_source',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '读数据表',
+        id: 100,
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'odps_source',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '读数据表',
+          id: 100,
+        },
+      },
+    ],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'source',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '统计分析',
+    id: 22,
+    category: 'analytics',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'analytics',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '算法',
+    id: 23,
+    category: 'ai_algo',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'algorithm',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '预测',
+    id: 24,
+    category: 'predict',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'predict',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '评估',
+    id: 25,
+    category: 'evaluation',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'evaluation',
+    parentId: 'platformAlgo',
+  },
+]
+
+export const searchByKeyword = async (keyword: string) => {
+  return Array(10)
+    .fill(null)
+    .map((i, idx) => {
+      return {
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDir: false,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: `${keyword}${idx}`,
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: `${keyword}__${idx}`,
+        id: idx,
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          name: `${keyword}-${idx}`,
+          codeName: `${keyword}${idx}`,
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          id: idx,
+        },
+      }
+    })
+}

src/mock/status.ts

+import get from 'lodash/get'
+import set from 'lodash/set'
+import cloneDeep from 'lodash/cloneDeep'
+
+let state = {
+  idx: 0,
+  running: false,
+  statusRes: {
+    lang: 'zh_CN',
+    success: true,
+    data: {
+      instStatus: {
+        '10571193': 'success',
+        '10571194': 'success',
+        '10571195': 'success',
+        '10571196': 'success',
+        '10571197': 'success',
+      },
+      execInfo: {
+        '10571193': {
+          jobStatus: 'success',
+          defName: '读数据表',
+          name: 'germany_credit_data',
+          id: 10571193,
+        },
+        '10571194': {
+          jobStatus: 'success',
+          defName: '离散值特征分析',
+          name: '离散值特征分析',
+          id: 10571194,
+        },
+        '10571195': {
+          jobStatus: 'success',
+          defName: '分箱',
+          startTime: '2020-10-19 13:28:55',
+          endTime: '2020-10-19 13:30:20',
+          name: '分箱',
+          id: 10571195,
+        },
+        '10571196': {
+          jobStatus: 'success',
+          defName: '评分卡训练',
+          startTime: '2020-10-19 13:28:55',
+          endTime: '2020-10-19 13:32:02',
+          name: '评分卡训练-1',
+          id: 10571196,
+        },
+      },
+      status: 'default',
+    },
+    Lang: 'zh_CN',
+  } as any,
+}
+
+export const runGraph = async (nodes: any[]) => {
+  const newState = getStatus()
+  newState.data.instStatus = {}
+  newState.data.execInfo = {}
+  nodes.forEach((node) => {
+    newState.data.instStatus[node.id] = 'default'
+    newState.data.execInfo[node.id] = {
+      jobStatus: 'default',
+      defName: node.name,
+      startTime: '2020-10-19 13:28:55',
+      endTime: '2020-10-19 13:32:02',
+      name: node.name,
+      id: 10571196,
+    }
+  })
+  state.running = true
+  state.idx = 0
+  state.statusRes = newState
+  return { success: true }
+}
+
+export const stopGraphRun = () => {
+  state.running = false
+  state.idx = 0
+  return { success: true }
+}
+
+const getStatus = () => cloneDeep(state.statusRes)
+
+export const queryGraphStatus = async () => {
+  const newState = getStatus()
+  // console.log('Call Api QueryGraphStatus', state)
+  if (state.running) {
+    const { instStatus, execInfo } = newState.data
+    const idList = Object.keys(instStatus)
+    if (state.idx === idList.length) {
+      state.idx = 0
+      state.running = false
+      idList.forEach((id) => {
+        set(instStatus, id, 'success')
+        set(execInfo, `${id}.jobStatus`, 'success')
+        set(newState, 'data.status', 'success')
+      })
+      return newState
+    }
+    const key = get(idList, state.idx)
+    set(instStatus, key, 'running')
+    set(execInfo, `${key}.jobStatus`, 'running')
+    set(newState, 'data.status', 'running')
+    state.idx += 1
+    return newState
+  }
+  return newState
+}

src/models/guide-algo-component.ts

+/* eslint-disable no-param-reassign */
+import { useCallback, useState } from 'react'
+import { algoData, searchByKeyword } from '@/mock/algo'
+
+export namespace Res {
+  export interface Data {
+    defs: NodeDef[]
+    cats: Cat[]
+  }
+
+  export interface NodeDef {
+    up: number
+    down: number
+    defSource: number
+    catName: string
+    isDeprecated: boolean
+    isSubscribed: boolean
+    isEnabled: boolean
+    iconType: number
+    docUrl: string
+    sequence: number
+    author?: string
+    ioType: number
+    lastModifyTime: string
+    createdTime: string
+    catId: number
+    isComposite: boolean
+    codeName: string
+    engineType?: number
+    description?: string
+    name: string
+    id: number
+    type: number
+    owner: string
+    algoSourceType?: number
+  }
+
+  export interface Cat {
+    defSource: number
+    isEnabled: boolean
+    iconType: number
+    codeName: string
+    description: string
+    sequence: number
+    name: string
+    id: number
+    category?: string
+  }
+}
+
+function dfs(
+  path = '',
+  nodes: any[],
+  isTarget: (node: any) => boolean,
+  result: string[] = [],
+) {
+  nodes.forEach((node, idx) => {
+    if (node.children) {
+      const currentIdx = path ? `${path}.${idx}.children` : `${idx}.children`
+      dfs(currentIdx, node.children, isTarget, result)
+    }
+
+    if (isTarget(node)) {
+      const currentIdx = path ? `${path}.${idx}` : idx
+      result.push(currentIdx.toString())
+    }
+  })
+}
+
+export default () => {
+  const [keyword, setKeyword] = useState<string>('') // 搜索关键字
+  const [loading, setLoading] = useState<boolean>(false) // 加载状态
+  const [componentTreeNodes, setComponentTreeNodes] = useState<any[]>([])
+  const [searchList, setSearchList] = useState<any[]>([]) // 搜索结果列表
+
+  // 加载组件
+  const loadComponentNodes = useCallback(() => {
+    setLoading(true)
+    const load = async () => {
+      try {
+        if (algoData) {
+          setComponentTreeNodes(algoData)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    return load()
+  }, [])
+
+  // 搜索组件
+  const search = useCallback((params: { keyword: string }) => {
+    setKeyword(params.keyword ? params.keyword : '')
+    if (!params.keyword) {
+      return
+    }
+    setLoading(true)
+
+    const load = async () => {
+      try {
+        const nodes = ([] = await searchByKeyword(params.keyword))
+        setSearchList(nodes)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  return {
+    // 状态
+    keyword,
+    loading,
+    componentTreeNodes,
+    searchList,
+
+    // 方法
+    setKeyword,
+    loadComponentNodes,
+    search,
+  }
+}

src/pages/common/canvas-handler/index.less

+@import (reference) '~antd/es/style/themes/default.less';
+
+.handler {
+  position: absolute;
+  top: 61px;
+  right: 14px;
+  z-index: 99;
+  width: 32px;
+  margin: 0;
+  padding: 3px 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 16px;
+  list-style-type: none;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 3px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
+
+  .item {
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #000;
+      background-color: #e0e0e0;
+    }
+  }
+}
+
+.popover {
+  :global {
+    .@{ant-prefix}-popover-inner-content {
+      padding: 3px 8px;
+    }
+  }
+}

src/pages/common/canvas-handler/index.tsx

+import React from 'react'
+import { Popover } from 'antd'
+import {
+  CompressOutlined,
+  OneToOneOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons'
+import classNames from 'classnames'
+import styles from './index.less'
+
+interface Props {
+  className?: string
+  onZoomIn: () => void
+  onZoomOut: () => void
+  onFitContent: () => void
+  onRealContent: () => void
+}
+
+export const CanvasHandler: React.FC<Props> = (props) => {
+  const { className, onZoomIn, onZoomOut, onFitContent, onRealContent } = props
+
+  return (
+    <ul className={classNames(styles.handler, className)}>
+      <Popover
+        overlayClassName={styles.popover}
+        content="放大"
+        placement="left"
+      >
+        <li onClick={onZoomIn} className={styles.item}>
+          <ZoomInOutlined />
+        </li>
+      </Popover>
+      <Popover
+        overlayClassName={styles.popover}
+        content="缩小"
+        placement="left"
+      >
+        <li onClick={onZoomOut} className={styles.item}>
+          <ZoomOutOutlined />
+        </li>
+      </Popover>
+      <Popover
+        overlayClassName={styles.popover}
+        content="实际尺寸"
+        placement="left"
+      >
+        <li onClick={onRealContent} className={styles.item}>
+          <OneToOneOutlined />
+        </li>
+      </Popover>
+      <Popover
+        overlayClassName={styles.popover}
+        content="适应画布"
+        placement="left"
+      >
+        <li onClick={onFitContent} className={styles.item}>
+          <CompressOutlined />
+        </li>
+      </Popover>
+    </ul>
+  )
+}

src/pages/common/graph-common/connector/index.ts

+import { Graph } from '@antv/x6'
+
+Graph.registerConnector(
+  'pai',
+  (s, t) => {
+    const offset = 4
+    const control = 80
+    const v1 = { x: s.x, y: s.y + offset + control }
+    const v2 = { x: t.x, y: t.y - offset - control }
+
+    return `M ${s.x} ${s.y}
+       L ${s.x} ${s.y + offset}
+       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${t.x} ${t.y - offset}
+       L ${t.x} ${t.y}
+      `
+  },
+  true,
+)

src/pages/common/graph-common/node-popover/index.less

+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  min-width: 220px;
+  .item {
+    font-size: 12px;
+    padding: 0 0 0;
+    line-height: 16px;
+    word-break: break-all;
+    margin: 0;
+    width: 220px;
+    display: flex;
+  }
+
+  .label {
+    flex: 1 0 45px;
+    text-align: right;
+    padding-right: 4px;
+    position: relative;
+    word-break: break-all;
+    color: rgba(0, 0, 0, 0.85);
+    &after {
+      content: ':';
+    }
+  }
+  .text {
+    padding-left: 4px;
+    flex: 3 0 100px;
+    color: rgba(0, 0, 0, 0.45);
+    word-break: break-all;
+  }
+}
+
+.content {
+  :global(.aicontent-popover-inner-content) {
+    padding: 12px 8px 8px 8px;
+  }
+}

src/pages/common/graph-common/node-popover/index.tsx

+import React from 'react'
+import { Popover } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import { isEmpty } from 'lodash-es'
+import css from './index.less'
+
+interface TooltipProps {
+  children: React.ReactElement
+  status: StatusObj
+}
+
+interface StatusObj {
+  name: string
+  defName: string
+  jobStatus: string
+  startTime: string
+  endTime: string
+}
+
+export const NodePopover = ({ children, status }: TooltipProps) => {
+  const componentNode = (
+    <div style={{ width: '100%', height: '100%' }}>{children}</div>
+  )
+  if (isEmpty(status)) {
+    return componentNode
+  }
+  return (
+    <Popover
+      placement="bottomLeft"
+      content={<PopoverContent status={status} />}
+      overlayClassName={css.content}
+    >
+      {componentNode}
+    </Popover>
+  )
+}
+
+const nodeAtts: StatusObj = {
+  name: '节点名称',
+  defName: '算法名称',
+  jobStatus: '运行状态',
+  startTime: '开始时间',
+  endTime: '结束时间',
+}
+
+const PopoverContent = ({ status }: { status: StatusObj }) => (
+  <ul className={css.list}>
+    {!status.name && <LoadingOutlined />}
+    {Object.entries(nodeAtts).map(([key, text]) => {
+      const value = status[key as keyof StatusObj]
+      if (value) {
+        return (
+          <li key={key} className={css.item}>
+            <span className={css.label}>{text}</span>
+            <span className={css.text}>{value}</span>
+          </li>
+        )
+      }
+      return null
+    })}
+  </ul>
+)

src/pages/common/graph-common/node-status/index.tsx

+import React from 'react'
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  SyncOutlined,
+} from '@ant-design/icons'
+
+interface Props {
+  className?: string
+  status: 'success' | 'fail' | 'running' | 'ready' | 'upChangeSuccess'
+}
+
+export const NodeStatus: React.FC<Props> = (props) => {
+  const { className, status } = props
+  switch (status) {
+    case 'fail':
+      return (
+        <div className={className}>
+          <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
+        </div>
+      )
+    case 'success':
+    case 'upChangeSuccess': {
+      const color = status === 'success' ? '#2ecc71' : '#1890ff'
+      return (
+        <div className={className}>
+          <CheckCircleOutlined style={{ color }} />
+        </div>
+      )
+    }
+    case 'running':
+      return (
+        <div className={className}>
+          <SyncOutlined spin={true} style={{ color: '#1890ff' }} />
+        </div>
+      )
+    default:
+      return null
+  }
+}

src/pages/component-tree-panel/component-source-tree/component-tree/index.less

+.componentTree {
+  display: block;
+  flex-grow: 1;
+}