diff --git a/packages/gi-assets-algorithm/src/NodesSimilarity/resultTable.tsx b/packages/gi-assets-algorithm/src/NodesSimilarity/resultTable.tsx index edc9f6142..9506ea13b 100644 --- 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 = ({ similarNodes, similarityKey = 'similarity', topReset }) => { + const { graph } = useContext(); const [sortOrder, setSortOrder] = useState(false); useEffect(() => { setSortOrder(false); @@ -111,6 +113,20 @@ const ClustersResultTable: React.FC = ({ 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 = ({ similarNodes, similarityKey = 's }} scroll={{ x: 200 }} onChange={onTableChange} + onRow={record => ({ + onMouseEnter: () => activeItem(record), + onMouseLeave: clearActiveItem, + })} /> diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx b/packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx index bff689941..c51548b3f 100644 --- 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 = props => { }, selecting: '', }); - let nodeClickListener = e => {}; // 缓存被高亮的节点和边 const highlightElementRef = useRef({ @@ -196,23 +195,6 @@ const PathAnalysis: React.FC = 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 = props => { - {/* {state.isAnalysis && state.allNodePath.length > 0 && ( - - )} */} @@ -405,7 +384,7 @@ const PathAnalysis: React.FC = props => {
{$i18n.get({ id: 'basic.components.PathAnalysis.Component.QueryResults', dm: '查询结果' })}
- +
= props => { key={index} header={$i18n.get( { id: 'basic.components.PathAnalysis.Component.PathNumber', dm: `路径 ${index + 1}` }, - { numebr: index + 1 }, + { number: index + 1 }, )} extra={ @@ -431,7 +410,7 @@ const PathAnalysis: React.FC = props => { const data = nodeConfig?.data || {}; return ( - {getNodeSelectionLabel(data, { nodeLabel: pathNodeLabel, labelFormat }) || nodeId} + {getNodeSelectionLabel(data, { nodeLabel: pathNodeLabel, labelFormat }).ele || nodeId} ); })} diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/SegmentFilter.tsx b/packages/gi-assets-basic/src/components/PathAnalysis/SegmentFilter.tsx index 071726023..28523ee39 100644 --- 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,7 +16,7 @@ export const options = [ }, ]; -const SegementFilter: React.FunctionComponent = props => { +const SegmentFilter: React.FunctionComponent = () => { return (
@@ -28,4 +24,4 @@ const SegementFilter: React.FunctionComponent = props => { ); }; -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 index 4b7953ca6..4baf5d423 100644 --- 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 {value}; + if (!labelFormat?.enable) return { raw: value, ele: {value} }; const { mainLabel, subLabel } = labelFormat; const mainLabelText: string = mainLabel && getByKey(mainLabel[0]); const subLabelText: string = subLabel && getByKey(subLabel[0]); - if (!mainLabelText && !subLabelText) return {value}; - if (!mainLabelText) return {subLabelText}; - if (!subLabelText) return {mainLabelText}; - return ( - <> - {mainLabelText} - ({subLabelText}) - - ); + if (!mainLabelText && !subLabelText) return { raw: value, ele: {value} }; + if (!mainLabelText) return { raw: subLabelText, ele: {subLabelText} }; + if (!subLabelText) return { raw: mainLabelText, ele: {mainLabelText} }; + return { + raw: `${mainLabelText}(${subLabelText})`, + ele: ( + <> + {mainLabelText} + ({subLabelText}) + + ), + }; }; let nodeClickListener = e => {}; @@ -182,6 +185,13 @@ const NodeSelectionFormItem: React.FC = memo(props = [isList, isCanvas], ); + const filterOption = (input: string, option?: Record) => { + const normalizeInput = input.toLowerCase(); + const match = (text: string = '') => text.toLowerCase().includes(normalizeInput); + if (!option) return false; + return match(option?.raw || option?.label); + }; + return (
= memo(props =