fix: path query and node similarity issues (#539)

* fix: fix issue that NodeSelectionFormItem cannot search * feat: nodes similarity support hilight node
antvis · Oct 26, 2023 · 9161ed6 · 9161ed6
1 parent df206a5
commit 9161ed6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 43 deletions.
diff --git a/packages/gi-assets-algorithm/src/NodesSimilarity/resultTable.tsx b/packages/gi-assets-algorithm/src/NodesSimilarity/resultTable.tsx
@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { useContext } from '@antv/gi-sdk';
 import { DownloadOutlined } from '@ant-design/icons';
 import { Table, Tooltip } from 'antd';
 import React, { useEffect, useState } from 'react';
@@ -12,6 +13,7 @@ interface Props {
 }
 
 const ClustersResultTable: React.FC<Props> = ({ similarNodes, similarityKey = 'similarity', topReset }) => {
+  const { graph } = useContext();
   const [sortOrder, setSortOrder] = useState(false);
   useEffect(() => {
     setSortOrder(false);
@@ -111,6 +113,20 @@ const ClustersResultTable: React.FC<Props> = ({ similarNodes, similarityKey = 's
     );
   };
 
+  const activeItem = record => {
+    clearActiveItem();
+    const item = graph.findById(record.id);
+    if (!item) return;
+    graph.setItemState(item, 'active', true);
+  };
+
+  const clearActiveItem = () => {
+    const activateItems = graph.findAllByState('node', 'active').concat(graph.findAllByState('edge', 'active'));
+    activateItems.forEach(item => {
+      graph.setItemState(item, 'active', false);
+    });
+  };
+
   const maxSimilarNode = similarNodes[1];
   const minSimilarNode = similarNodes[similarNodes.length - 1];
 
@@ -150,6 +166,10 @@ const ClustersResultTable: React.FC<Props> = ({ similarNodes, similarityKey = 's
           }}
           scroll={{ x: 200 }}
           onChange={onTableChange}
+          onRow={record => ({
+            onMouseEnter: () => activeItem(record),
+            onMouseLeave: clearActiveItem,
+          })}
         />
       </div>
     </>

diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx b/packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx
@@ -9,7 +9,7 @@ import React, { memo, useEffect, useRef } from 'react';
 import { useImmer } from 'use-immer';
 import $i18n from '../../i18n';
 import PanelExtra from './PanelExtra';
-import SegementFilter from './SegmentFilter';
+import SegmentFilter from './SegmentFilter';
 import './index.less';
 import { IHighlightElement, IState } from './typing';
 import { getPathByWeight } from './utils';
@@ -57,7 +57,6 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
     },
     selecting: '',
   });
-  let nodeClickListener = e => {};
 
   // 缓存被高亮的节点和边
   const highlightElementRef = useRef<IHighlightElement>({
@@ -196,23 +195,6 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
     });
   };
 
-  const beginSelect = type => {
-    updateState(draft => {
-      draft.selecting = type;
-    });
-    graph.off('node:click', nodeClickListener);
-
-    nodeClickListener = e => {
-      updateState(draft => {
-        draft.selecting = '';
-      });
-      const { item } = e;
-      if (!item || item.destroyed) return;
-      form.setFieldsValue({ [type]: item.getID() });
-    };
-    graph.once('node:click', nodeClickListener);
-  };
-
   useEffect(() => {
     for (let i = 0; i < state.nodePath.length; i++) {
       const nodes = state.nodePath[i];
@@ -388,9 +370,6 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
               </Col>
               <Col span={6} style={{ textAlign: 'right' }}>
                 <Space size={'small'}>
-                  {/* {state.isAnalysis && state.allNodePath.length > 0 && (
-                     <FilterRule state={state} updateState={updateState} />
-                    )} */}
                   <Button onClick={handleResetForm}>
                     {$i18n.get({ id: 'basic.components.PathAnalysis.Component.Reset', dm: '重置' })}
                   </Button>
@@ -405,7 +384,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
         <div className="gi-path-analysis-container">
           <div className="gi-path-analysis-title">
             <div>{$i18n.get({ id: 'basic.components.PathAnalysis.Component.QueryResults', dm: '查询结果' })}</div>
-            <SegementFilter state={state} updateState={updateState} />
+            <SegmentFilter />
           </div>
           <Collapse
             defaultActiveKey={0}
@@ -419,7 +398,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
                   key={index}
                   header={$i18n.get(
                     { id: 'basic.components.PathAnalysis.Component.PathNumber', dm: `路径 ${index + 1}` },
-                    { numebr: index + 1 },
+                    { number: index + 1 },
                   )}
                   extra={
                     <PanelExtra pathId={index} highlightPath={state.highlightPath} onSwitchChange={onSwitchChange} />
@@ -431,7 +410,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
                       const data = nodeConfig?.data || {};
                       return (
                         <Timeline.Item>
-                          {getNodeSelectionLabel(data, { nodeLabel: pathNodeLabel, labelFormat }) || nodeId}
+                          {getNodeSelectionLabel(data, { nodeLabel: pathNodeLabel, labelFormat }).ele || nodeId}
                         </Timeline.Item>
                       );
                     })}

diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/SegmentFilter.tsx b/packages/gi-assets-basic/src/components/PathAnalysis/SegmentFilter.tsx
@@ -3,10 +3,6 @@ import * as React from 'react';
 
 import { IState } from './typing';
 import $i18n from '../../i18n';
-interface SegementFilterProps {
-  state: IState;
-  updateState: any;
-}
 
 export const options = [
   {
@@ -20,12 +16,12 @@ export const options = [
   },
 ];
 
-const SegementFilter: React.FunctionComponent<SegementFilterProps> = props => {
+const SegmentFilter: React.FunctionComponent = () => {
   return (
     <div>
       <Segmented options={options} value={options[1].value} />
     </div>
   );
 };
 
-export default SegementFilter;
+export default SegmentFilter;
diff --git a/packages/gi-common-components/src/NodeSelectionWrap/index.tsx b/packages/gi-common-components/src/NodeSelectionWrap/index.tsx
@@ -120,20 +120,23 @@ export const getNodeSelectionLabel = (
 
   const getByKey = (key: string) => node[key] ?? node.data[key];
 
-  if (!labelFormat?.enable) return <Text>{value}</Text>;
+  if (!labelFormat?.enable) return { raw: value, ele: <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>
-    </>
-  );
+  if (!mainLabelText && !subLabelText) return { raw: value, ele: <Text>{value}</Text> };
+  if (!mainLabelText) return { raw: subLabelText, ele: <Text type="secondary">{subLabelText}</Text> };
+  if (!subLabelText) return { raw: mainLabelText, ele: <Text>{mainLabelText}</Text> };
+  return {
+    raw: `${mainLabelText}(${subLabelText})`,
+    ele: (
+      <>
+        <Text>{mainLabelText}</Text>
+        <Text type="secondary">({subLabelText})</Text>
+      </>
+    ),
+  };
 };
 
 let nodeClickListener = e => {};
@@ -182,6 +185,13 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
     [isList, isCanvas],
   );
 
+  const filterOption = (input: string, option?: Record<string, any>) => {
+    const normalizeInput = input.toLowerCase();
+    const match = (text: string = '') => text.toLowerCase().includes(normalizeInput);
+    if (!option) return false;
+    return match(option?.raw || option?.label);
+  };
+
   return (
     <div className="nodeSelectionFormItem">
       <Form.Item
@@ -195,6 +205,7 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
         <Select
           showSearch
           optionFilterProp="children"
+          filterOption={filterOption}
           onChange={() => {
             setSelecting('');
           }}
@@ -206,9 +217,9 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
             .map(node => {
               const value = node[nodeLabel];
 
-              const label = getNodeSelectionLabel(node, { nodeLabel, labelFormat });
+              const { ele: label, raw } = getNodeSelectionLabel(node, { nodeLabel, labelFormat });
 
-              return { label, value };
+              return { label, value, raw };
             })}
           {...selectProps}
         />