refactor(node-selection): component support config filter nodes

packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx

@@ -19,23 +19,24 @@ export interface CommunityDiscoveryProps extends NodeFormatProps {
   onOpen?: () => void;
   nodeSelectionMode: string[];
   nodeLabel: string;
+  filter?: (node: any) => boolean;
 }
 
 export enum NodesSimilarityAlgorithm {
-  nodesConsineSimilarity = 'nodes-cosine-similarity',
+  nodesCosineSimilarity = 'nodes-cosine-similarity',
 }
 
 interface ResData {
   similarityRes: number[] | undefined;
   similarNodes: any[] | undefined;
 }
 const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
-  const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel, labelFormat } = props;
+  const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel, labelFormat, filter } = props;
   const { data, graph, updateHistory } = useContext();
-  const [communityAlgo, setCommunityAlgo] = useState(NodesSimilarityAlgorithm.nodesConsineSimilarity);
+  const [communityAlgo, setCommunityAlgo] = useState(NodesSimilarityAlgorithm.nodesCosineSimilarity);
   const [initData, setInitData] = useState<GraphinData>({ nodes: [], edges: [] });
 
-  const [similarityAlgo, setSimilarityAlgo] = useState<string>(NodesSimilarityAlgorithm.nodesConsineSimilarity);
+  const [similarityAlgo, setSimilarityAlgo] = useState<string>(NodesSimilarityAlgorithm.nodesCosineSimilarity);
   const [resData, setResData] = useState<ResData>({ similarityRes: [], similarNodes: [] });
   const [hasAnalysis, setHasAnalysis] = useState(false);
   const [seedNodeId, setSeedNodeId] = useState<string | null>(null);
@@ -176,7 +177,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
     const { seed } = await form.validateFields();
     setSeedNodeId(seed);
     switch (algorithm || similarityAlgo) {
-      case NodesSimilarityAlgorithm.nodesConsineSimilarity:
+      case NodesSimilarityAlgorithm.nodesCosineSimilarity:
         if (!graph || graph.destroyed) {
           handleUpdateHistory(
             false,
@@ -243,7 +244,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
       );
     }
 
-    if (similarityAlgo === NodesSimilarityAlgorithm.nodesConsineSimilarity) {
+    if (similarityAlgo === NodesSimilarityAlgorithm.nodesCosineSimilarity) {
       return (
         <div className="nodes-similarity-result-wrapper">
           <span className="nodes-similarity-title">
@@ -259,7 +260,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
     form.resetFields();
     resetMapping([], []);
     setResData({ similarityRes: [], similarNodes: [] });
-    setCommunityAlgo(NodesSimilarityAlgorithm.nodesConsineSimilarity);
+    setCommunityAlgo(NodesSimilarityAlgorithm.nodesCosineSimilarity);
     setTopReset(true);
   };
 
@@ -286,6 +287,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
                   }),
                 },
               ]}
+              filter={filter}
               data={data.nodes}
               labelFormat={labelFormat}
               nodeLabel={nodeLabel}

packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx

@@ -1,6 +1,6 @@
 import { CaretRightOutlined } from '@ant-design/icons';
 import { findShortestPath } from '@antv/algorithm';
-import { NodeSelectionWrap } from '@antv/gi-common-components';
+import { NodeSelectionWrap, getNodeSelectionLabel } from '@antv/gi-common-components';
 import type { NodeFormatProps } from '@antv/gi-common-components';
 import { useContext } from '@antv/gi-sdk';
 import { Button, Col, Collapse, Empty, Form, InputNumber, Row, Space, Switch, Timeline, message } from 'antd';
@@ -27,6 +27,7 @@ export interface IPathAnalysisProps extends NodeFormatProps {
     direction: string;
   };
   onOpen: () => void;
+  filter?: (node: any) => boolean;
 }
 
 enableMapSet();
@@ -40,6 +41,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
     hasMaxDeep,
     hasDirection,
     labelFormat,
+    filter,
   } = props;
   const { data: graphData, graph, sourceDataMap, updateHistory } = useContext();
 
@@ -344,6 +346,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
             graph={graph}
             form={form}
             items={items}
+            filter={filter}
             data={graphData.nodes}
             labelFormat={labelFormat}
             nodeLabel={pathNodeLabel}
@@ -426,7 +429,11 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
                     {path.map(nodeId => {
                       const nodeConfig = sourceDataMap.nodes[nodeId];
                       const data = nodeConfig?.data || {};
-                      return <Timeline.Item>{data[pathNodeLabel] || nodeId}</Timeline.Item>;
+                      return (
+                        <Timeline.Item>
+                          {getNodeSelectionLabel(data, { nodeLabel: pathNodeLabel, labelFormat }) || nodeId}
+                        </Timeline.Item>
+                      );
                     })}
                   </Timeline>
                 </Panel>

packages/gi-common-components/src/NodeSelectionWrap/index.tsx

@@ -91,6 +91,7 @@ interface NodeSelectionProps extends NodeFormatProps {
   data: Record<string, any>[];
   nodeLabel: string;
   nodeSelectionMode: string[];
+  filter?: (node: any) => boolean;
 }
 
 interface NodeSelectionWrapProps extends NodeSelectionProps {
@@ -110,6 +111,31 @@ interface NodeSelectionFormItemProps extends NodeSelectionProps {
   setSelecting: React.Dispatch<React.SetStateAction<string>>;
 }
 
+export const getNodeSelectionLabel = (
+  node: Record<string, any>,
+  config: Pick<NodeSelectionProps, 'nodeLabel' | 'labelFormat'>,
+) => {
+  const { nodeLabel, labelFormat } = config;
+  const value = node[nodeLabel];
+
+  const getByKey = (key: string) => node[key] ?? node.data[key];
+
+  if (!labelFormat?.enable) return <Text>{value}</Text>;
+  const { mainLabel, subLabel } = labelFormat;
+  const mainLabelText: string = mainLabel && getByKey(mainLabel[0]);
+  const subLabelText: string = subLabel && getByKey(subLabel[0]);
+
+  if (!mainLabelText && !subLabelText) return <Text>{value}</Text>;
+  if (!mainLabelText) return <Text type="secondary">{subLabelText}</Text>;
+  if (!subLabelText) return <Text>{mainLabelText}</Text>;
+  return (
+    <>
+      <Text>{mainLabelText}</Text>
+      <Text type="secondary">({subLabelText})</Text>
+    </>
+  );
+};
+
 let nodeClickListener = e => {};
 
 const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props => {
@@ -127,6 +153,7 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
     color,
     showDot,
     labelFormat,
+    filter,
   } = props;
   const isList = nodeSelectionMode.includes(NodeSelectionMode.List);
   const isCanvas = nodeSelectionMode.includes(NodeSelectionMode.Canvas);
@@ -171,32 +198,18 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
           onChange={() => {
             setSelecting('');
           }}
-          options={data.map(node => {
-            const value = node[nodeLabel];
-
-            const getLabel = () => {
-              const getByKey = (key: string) => node[key] ?? node.data[key];
-
-              if (!labelFormat?.enable) return <Text>{value}</Text>;
-              const { mainLabel, subLabel } = labelFormat;
-              const mainLabelText: string = mainLabel && getByKey(mainLabel[0]);
-              const subLabelText: string = subLabel && getByKey(subLabel[0]);
-
-              if (!mainLabelText && !subLabelText) return <Text>{value}</Text>;
-              if (!mainLabelText) return <Text type="secondary">{subLabelText}</Text>;
-              if (!subLabelText) return <Text>{mainLabelText}</Text>;
-              return (
-                <>
-                  <Text>{mainLabelText}</Text>
-                  <Text type="secondary">({subLabelText})</Text>
-                </>
-              );
-            };
+          options={data
+            .filter(node => {
+              if (filter) return filter(node);
+              return true;
+            })
+            .map(node => {
+              const value = node[nodeLabel];
 
-            const label = getLabel();
+              const label = getNodeSelectionLabel(node, { nodeLabel, labelFormat });
 
-            return { label, value };
-          })}
+              return { label, value };
+            })}
           {...selectProps}
         />
       </Form.Item>
@@ -222,7 +235,7 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
 });
 
 const NodeSelectionWrap: React.FC<NodeSelectionWrapProps> = memo(props => {
-  const { graph, nodeSelectionMode, nodeLabel, items, form, data, labelFormat } = props;
+  const { graph, nodeSelectionMode, nodeLabel, items, form, data, labelFormat, filter } = props;
   const [selecting, setSelecting] = useState('');
   const colors = ['#1650FF', '#FFC53D'];
   const handleSwap = async () => {
@@ -242,6 +255,7 @@ const NodeSelectionWrap: React.FC<NodeSelectionWrapProps> = memo(props => {
           name={item.name}
           label={item.label}
           data={data}
+          filter={filter}
           nodeLabel={nodeLabel}
           labelFormat={labelFormat}
           nodeSelectionMode={nodeSelectionMode}

packages/gi-common-components/src/index.ts

@@ -17,5 +17,10 @@ export { Icon, icons, registerIconFonts } from './Icon/index';
 export { default as RadiusTabs } from './RadiusTabs';
 export { default as SchemaField } from './SchemaField';
 export { default as Utils } from './Utils';
-export { default as NodeSelectionWrap, NodeSelectionMode, getNodeFormatOption } from './NodeSelectionWrap';
+export {
+  default as NodeSelectionWrap,
+  NodeSelectionMode,
+  getNodeFormatOption,
+  getNodeSelectionLabel,
+} from './NodeSelectionWrap';
 export type { NodeFormatProps } from './NodeSelectionWrap';