Merge pull request #33 from secretflow/release/0.10.0

chore: 8月迭代

.vscode/settings.json

@@ -33,8 +33,8 @@
   "editor.rulers": [88],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[markdown]": {
     "editor.quickSuggestions": {

apps/platform/config/config.ts

@@ -44,7 +44,7 @@ export default defineConfig({
   //   apps: [
   //     {
   //       name: 'secretpad', // 后端应用名
-  //       tag: 'feature/0.7.0b0', // 分支 tag
+  //       tag: 'feature/0.9.0b0_merge', // 分支 tag
   //       source: 'ZAPPINFO', // 应用来源，默认 ZAPPINFO，其他来源可在官网的应用信息中查看
   //     },
   //   ],

apps/platform/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@antv/g2": "^4.2.9",
+    "@antv/layout": "^0.3.23",
     "@antv/s2": "^1.52.0",
     "@antv/s2-react": "^1.44.2",
     "@antv/x6": "^2.11.1",

apps/platform/src/components/datatable-preview.tsx

@@ -81,7 +81,7 @@ export const DatatablePreview = (props: DatatablePreviewInterface) => {
         <EdgeAuthWrapper>
           <Link
             onClick={() => {
-              const serarch = `nodeId=${props.node.nodeId}&tab=data-management`;
+              const serarch = `ownerId=${props.node.nodeId}&tab=data-management`;
               openNewTab(pathname, '/node', serarch);
             }}
           >

apps/platform/src/components/vote-insts-graph/edge.ts

@@ -0,0 +1,18 @@
+import { Graph } from '@antv/x6';
+
+Graph.registerEdge(
+  'custom-vote-edge',
+  {
+    inherit: 'edge',
+    connector: { name: 'smooth' },
+    attrs: {
+      line: {
+        stroke: '#C1C7D0',
+        strokeWidth: 1,
+        opacity: 1,
+        targetMarker: {},
+      },
+    },
+  },
+  true,
+);

apps/platform/src/components/vote-insts-graph/index.less

@@ -0,0 +1,94 @@
+.container {
+  width: 100%;
+  height: 100%;
+
+  .graph {
+    width: 100% !important;
+    height: 200px;
+  }
+
+  :global(.x6-edge) {
+    path {
+      cursor: default;
+    }
+  }
+
+  :global(.x6-edge:hover) {
+    path:nth-child(2) {
+      stroke: #c1c7d0;
+    }
+  }
+}
+
+.custom-vote-node {
+  display: flex;
+  width: 280px;
+  height: 64px;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid #00000026;
+  border-radius: 4px;
+  background-color: #fff;
+
+  .nodeName {
+    display: flex;
+  }
+
+  .nodeName,
+  .instName {
+    width: 100%;
+    text-align: left;
+  }
+
+  .instName {
+    display: flex;
+    align-items: center;
+
+    :global {
+      .ant-typography {
+        color: #00000073;
+      }
+    }
+  }
+}
+
+.tag {
+  height: 18px;
+  box-sizing: content-box;
+  padding: 0 3px;
+  border: 1px solid rgb(0 0 0 / 6%);
+  border-radius: 4px;
+  background-image: linear-gradient(180deg, #fafdff 0%, #e6f4ff 100%);
+  font-size: 10px;
+  line-height: 18px;
+}
+
+.tagInvitee {
+  background-image: linear-gradient(180deg, #fff 0%, #eee 100%);
+}
+
+.agree {
+  border: solid 1px #23b65f;
+  margin-right: 0;
+  background-color: #ecfff4;
+  background-image: none;
+  color: #23b65f;
+}
+
+.reviewing {
+  border: solid 1px #0068fa;
+  margin-right: 0;
+  background-color: #f0f5ff;
+  background-image: none;
+  color: #0068fa;
+}
+
+.rejected {
+  border: solid 1px red;
+  margin-right: 0;
+  background-color: #fff0f0;
+  background-image: none;
+  color: red;
+}

apps/platform/src/components/vote-insts-graph/index.tsx

@@ -0,0 +1,130 @@
+import { DagreLayout } from '@antv/layout';
+import type { Edge, Node } from '@antv/x6';
+import { Graph } from '@antv/x6';
+import { useSize } from 'ahooks';
+import classnames from 'classnames';
+import './edge';
+import './node';
+import type { Dispatch, SetStateAction } from 'react';
+import React, { useEffect } from 'react';
+
+import styles from './index.less';
+
+interface IVoteInstNodesGraph {
+  nodes: Node[];
+  edges: Edge[];
+  groupNodeIds: string[][];
+  setGraphHeight: Dispatch<SetStateAction<number>>;
+}
+
+export const VoteInstNodesGraph: React.FC<IVoteInstNodesGraph> = ({
+  nodes,
+  edges,
+  groupNodeIds,
+  setGraphHeight,
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [graph, setGraph] = React.useState<Graph | null>(null);
+
+  const viewRef = React.useRef<HTMLDivElement>(null);
+  const { width, height } = useSize(viewRef.current) || {};
+
+  useEffect(() => {
+    if (graph && width && height) {
+      graph.resize(width, height);
+    }
+  }, [graph, width, height]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      initGraph(containerRef.current, nodes, edges);
+    }
+    return () => {
+      disposeGraph();
+    };
+  }, [nodes, edges]);
+
+  const initGraph = (container: HTMLDivElement, nodes: Node[], edges: Edge[]) => {
+    const { clientWidth, clientHeight } = container;
+    const _graph = new Graph({
+      container,
+      width: clientWidth || 552,
+      height: clientHeight || 200,
+      interacting: false,
+      autoResize: true,
+      connecting: {
+        connector: {
+          name: 'rounded',
+          args: {
+            radius: 8,
+          },
+        },
+      },
+    });
+
+    const dagreLayout = new DagreLayout({
+      type: 'dagre',
+      rankdir: 'LR',
+      ranksep: 100,
+      nodesep: 22,
+    });
+
+    const model = dagreLayout.layout({
+      nodes,
+      edges,
+    });
+
+    _graph.fromJSON(model);
+
+    // 添加 节点 group 包围每组图
+    const padding = 16;
+    groupNodeIds.forEach((groupIds) => {
+      const bbox = _graph.getCellsBBox(groupIds.map((id) => _graph.getCellById(id)));
+      if (bbox) {
+        const node = _graph.addNode({
+          x: bbox.x - padding,
+          y: bbox.y - padding,
+          width: bbox.width + padding * 2,
+          height: bbox.height + padding * 2,
+          id: `group-${groupIds.join('-')}`,
+          attrs: {
+            body: {
+              strokeWidth: 0,
+              fill: '#00000005',
+            },
+          },
+        });
+        node.toBack();
+      }
+    });
+
+    _graph.zoomToFit({
+      minScale: 0.85,
+    });
+
+    _graph.positionContent('top');
+
+    const graphBbox = _graph.getAllCellsBBox();
+
+    if (setGraphHeight) {
+      const { height } = _graph.localToClient(graphBbox);
+      setGraphHeight(height);
+    }
+
+    setGraph(_graph);
+  };
+
+  const disposeGraph = () => {
+    if (graph) {
+      graph.dispose();
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div ref={containerRef} className={classnames(styles.graph, 'x6-graph')} />
+      </div>
+    </>
+  );
+};

apps/platform/src/components/vote-insts-graph/node.tsx

@@ -0,0 +1,77 @@
+import type { Node } from '@antv/x6';
+import { register } from '@antv/x6-react-shape';
+import { Tag } from 'antd';
+import Paragraph from 'antd/es/typography/Paragraph';
+import classnames from 'classnames';
+
+import { ReactComponent as InstIcon } from '@/assets/inst.icon.svg';
+import { MessageStateTagWrap } from '@/modules/message-center/component/common';
+import {
+  StatusEnum,
+  StatusObj,
+} from '@/modules/p2p-project-list/components/auth-project-tag';
+
+import styles from './index.less';
+
+const VoteNode = ({ node }: { node: Node }) => {
+  const data = node.getData();
+  const { action, isInitiator, instName, nodeName, isOurNode } = data;
+
+  const voteTagClassNameMapping = {
+    [StatusEnum.AGREE]: 'agree',
+    [StatusEnum.PROCESS]: 'reviewing',
+    [StatusEnum.REJECT]: 'rejected',
+  };
+
+  return (
+    <div className={styles['custom-vote-node']}>
+      <div className={styles.nodeName}>
+        <Tag
+          className={classnames(styles.tag, {
+            [styles.tagInvitee]: !isInitiator,
+          })}
+        >
+          {isInitiator ? '发起' : '受邀'}
+        </Tag>
+        <Paragraph
+          style={{ fontSize: 14, marginRight: 8, width: 200, marginBottom: 0 }}
+          ellipsis={{ rows: 1, tooltip: nodeName + (isOurNode ? '(我的)' : '') }}
+        >
+          {nodeName}
+          <span style={{ color: '#00000026' }}>{isOurNode ? '(我的)' : ''}</span>
+        </Paragraph>
+        {isOurNode ? (
+          <MessageStateTagWrap label={'本方状态'} status={action} />
+        ) : (
+          <Tag
+            className={classnames(
+              styles.tag,
+              styles[voteTagClassNameMapping[action as StatusEnum] || 'agree'],
+            )}
+          >
+            {StatusObj[action as StatusEnum]}
+          </Tag>
+        )}
+      </div>
+
+      <div className={styles.instName}>
+        <InstIcon />
+        <Paragraph
+          style={{ fontSize: 14, marginLeft: 4, width: 200, marginBottom: 0 }}
+          ellipsis={{ rows: 1, tooltip: instName }}
+        >
+          {instName}
+        </Paragraph>
+      </div>
+    </div>
+  );
+};
+
+register({
+  shape: 'custom-vote-node',
+  width: 280,
+  height: 64,
+  component: VoteNode,
+  effect: ['data'],
+  inherit: 'react-shape',
+});