feat: support labelField in FlowDirectionGraph and FlowGraph

packages/graphs/src/components/flow-direction-graph/options.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
 import { RCNode } from '../../core/base';
+import { formatLabel } from '../../core/utils/label';
 import type { GraphOptions } from '../../types';
+import type { FlowDirectionGraphOptions } from './types';
 
 const { TextNode } = RCNode;
 
 export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'react',
-    style: {
-      component: (data) => <TextNode type="filled" text={data.id} />,
-      size: [100, 40],
-      ports: [{ placement: 'left' }, { placement: 'right' }],
-    },
     state: {
       active: {
         halo: false,
@@ -39,3 +36,22 @@ export const DEFAULT_OPTIONS: GraphOptions = {
   },
   transforms: ['translate-react-node-origin'],
 };
+
+export const getFlowDirectionGraphOptions = ({
+  labelField,
+}: Pick<FlowDirectionGraphOptions, 'labelField'>): FlowDirectionGraphOptions => {
+  const options: FlowDirectionGraphOptions = {
+    node: {
+      style: {
+        component: (data) => {
+          const label = formatLabel(data, labelField);
+          return <TextNode type="filled" text={label} />;
+        },
+        size: [100, 40],
+        ports: [{ placement: 'left' }, { placement: 'right' }],
+      },
+    },
+  };
+
+  return options;
+};

packages/graphs/src/components/flow-direction-graph/types.ts

@@ -1,3 +1,12 @@
+import type { NodeData } from '@antv/g6';
 import { GraphOptions } from '../../types';
 
-export interface FlowDirectionGraphOptions extends GraphOptions {}
+export interface FlowDirectionGraphOptions extends GraphOptions {
+  /**
+   * Selects a field from the data to use as the label for the node.
+   * If a string is provided, it will select the field as `data[labelField]`.
+   * If a function is provided, it will call the function with the data and use the returned value.
+   * @default (data) => data.id
+   */
+  labelField?: string | ((node: NodeData) => string);
+}

packages/graphs/src/components/flow-graph/index.tsx

@@ -17,8 +17,8 @@ export const FlowGraph: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<FlowGraphOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<FlowGraphOptions>>(({ children, ...props }, ref) => {
   const options = useMemo(() => {
-    const { direction = 'horizontal', ...restProps } = props;
-    return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowGraphOptions({ direction }), restProps);
+    const { direction = 'horizontal', labelField, ...restProps } = props;
+    return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowGraphOptions({ direction, labelField }), restProps);
   }, [props]);
 
   return (

packages/graphs/src/components/flow-graph/options.tsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import { RCNode } from '../../core/base';
+import { formatLabel } from '../../core/utils/label';
 import type { FlowGraphOptions } from './types';
 
 const { TextNode } = RCNode;
 
 export const DEFAULT_OPTIONS: FlowGraphOptions = {
   node: {
     type: 'react',
-    style: {
-      component: (data) => <TextNode type="filled" text={data.id} />,
-      size: [100, 40],
-      ports: [{ placement: 'left' }, { placement: 'right' }],
-    },
     state: {
       active: {
         halo: false,
@@ -32,28 +28,34 @@ export const DEFAULT_OPTIONS: FlowGraphOptions = {
   },
   layout: {
     type: 'dagre',
-    rankdir: 'LR',
     animation: false,
   },
   transforms: ['translate-react-node-origin'],
 };
 
-export const getFlowGraphOptions = ({ direction }: Pick<FlowGraphOptions, 'direction'>): FlowGraphOptions => {
-  let options: FlowGraphOptions = {};
-
-  if (direction === 'vertical') {
-    options = {
-      node: {
-        style: {
-          ports: [{ placement: 'top' }, { placement: 'bottom' }],
+export const getFlowGraphOptions = ({
+  direction,
+  labelField,
+}: Pick<FlowGraphOptions, 'direction' | 'labelField'>): FlowGraphOptions => {
+  const options: FlowGraphOptions = {
+    node: {
+      style: {
+        component: (data) => {
+          const label = formatLabel(data, labelField);
+          return <TextNode type="filled" text={label} />;
         },
+        size: [100, 40],
+        ports:
+          direction === 'vertical'
+            ? [{ placement: 'top' }, { placement: 'bottom' }]
+            : [{ placement: 'left' }, { placement: 'right' }],
       },
-      layout: {
-        type: 'dagre',
-        rankdir: 'TB',
-      },
-    };
-  }
+    },
+    layout: {
+      type: 'dagre',
+      rankdir: direction === 'vertical' ? 'TB' : 'LR',
+    },
+  };
 
   return options;
 };

packages/graphs/src/components/flow-graph/types.ts

@@ -1,3 +1,4 @@
+import type { NodeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
 export interface FlowGraphOptions extends GraphOptions {
@@ -6,4 +7,11 @@ export interface FlowGraphOptions extends GraphOptions {
    * @default 'horizontal'
    */
   direction?: 'horizontal' | 'vertical';
+  /**
+   * Selects a field from the data to use as the label for the node.
+   * If a string is provided, it will select the field as `data[labelField]`.
+   * If a function is provided, it will call the function with the data and use the returned value.
+   * @default (data) => data.id
+   */
+  labelField?: string | ((node: NodeData) => string);
 }