diff --git a/packages/gi-assets-scene/package.json b/packages/gi-assets-scene/package.json index 3dff2cdcc..cce45f32a 100644 --- a/packages/gi-assets-scene/package.json +++ b/packages/gi-assets-scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/gi-assets-scene", - "version": "2.2.5", + "version": "2.2.6", "description": "G6VP 基础模版包", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/gi-assets-scene/src/Timebar/Component.tsx b/packages/gi-assets-scene/src/Timebar/Component.tsx index 24f1954aa..59a43545e 100644 --- a/packages/gi-assets-scene/src/Timebar/Component.tsx +++ b/packages/gi-assets-scene/src/Timebar/Component.tsx @@ -25,7 +25,7 @@ type TimebarProps = { speed: Speed; aggregation: Aggregation; /** 播放模式:过滤/高亮 */ - playMode: 'filter' | 'highlight'; + playMode: 'filter' | 'highlight' | 'show-hide'; }; export const Timebar: React.FC = ({ diff --git a/packages/gi-assets-scene/src/Timebar/control/index.tsx b/packages/gi-assets-scene/src/Timebar/control/index.tsx index 5cbe47e10..45fc7c58d 100644 --- a/packages/gi-assets-scene/src/Timebar/control/index.tsx +++ b/packages/gi-assets-scene/src/Timebar/control/index.tsx @@ -16,7 +16,7 @@ export interface TimebarControlType { timeGranularity: TimeGranularity; type: FieldType; yField?: string; - playMode: 'filter' | 'highlight'; + playMode: 'filter' | 'highlight' | 'show-hide'; } const isEmptyGraphData = (data: GIGraphData) => !data.edges.length && !data.nodes.length; @@ -81,7 +81,29 @@ const TimebarControl: React.FC = props => { graph.setItemState(edge.id, 'inactive', true); } }); + } else if (playMode === 'show-hide') { + // 遍历数据,将不在时间范围内的点、边状态置为 disable + const shownNodes = {}; + graphData.nodes.forEach(node => { + const { id } = node; + if (filteredData.nodes.some(data => data.id === id)) { + graph.showItem(id); + shownNodes[id] = true; + } else { + graph.hideItem(id); + } + }); + graphData.edges.forEach(edge => { + const { id, source, target } = edge; + if (filteredData.edges.some(data => data.id === id) && shownNodes[source] && shownNodes[target]) { + graph.showItem(id); + } else { + graph.hideItem(id); + } + }); } + + graph.emit('timechange', { timeRange }); }, [timeRange, graphDataRef.current]); const { run: onFilterChange } = useThrottleFn( diff --git a/packages/gi-assets-scene/src/Timebar/control/panel/index.tsx b/packages/gi-assets-scene/src/Timebar/control/panel/index.tsx index b7b9e2c85..62b140c91 100644 --- a/packages/gi-assets-scene/src/Timebar/control/panel/index.tsx +++ b/packages/gi-assets-scene/src/Timebar/control/panel/index.tsx @@ -103,8 +103,6 @@ const TimebarPanel: React.FC = props => { setChartSelectedRange([-Infinity, Infinity]); }; - console.log('dataTimes', dataTimes); - return (
diff --git a/packages/gi-assets-scene/src/Timebar/control/utils.ts b/packages/gi-assets-scene/src/Timebar/control/utils.ts index a539c4ca1..10f625219 100644 --- a/packages/gi-assets-scene/src/Timebar/control/utils.ts +++ b/packages/gi-assets-scene/src/Timebar/control/utils.ts @@ -34,39 +34,12 @@ export function dataFilter( const parser = time => timeParser(time, timeGranularity); const baseFiltered = (data[type] as any[]).filter(item => { + if (!item.data[timeField]) return true; const time = parser(item.data[timeField]); return time >= parser(range[0]) && time <= parser(range[1]); }); - let anotherFiltered: any[] = []; const another: any[] = data[type === 'nodes' ? 'edges' : 'nodes']; - if (another.length > 0) { - if (another[0].data[timeField]) { - anotherFiltered = another.filter(item => { - const time = parser(item.data[timeField]); - return time >= parser(range[0]) && time <= parser(range[1]); - }); - } - // 如果节点数据中没有时间字段,根据 base 数据进行筛选 - else { - if (type === 'edges') { - const allNodesFromEdges = baseFiltered.reduce((acc, cur) => { - acc.add(cur.source); - acc.add(cur.target); - return acc; - }, new Set([])); - anotherFiltered = another.filter(node => allNodesFromEdges.has(node.id)); - } else { - const allEdgesFromNodes = baseFiltered.reduce((acc, cur) => { - acc.add(cur.id); - return acc; - }, new Set([])); - anotherFiltered = another.filter( - edge => allEdgesFromNodes.has(edge.source) && allEdgesFromNodes.has(edge.target), - ); - } - } - } const addPlayingTag = (data: T[]) => { const now = new Date().getTime(); @@ -75,7 +48,7 @@ export function dataFilter( return { [type]: addPlayingTag(baseFiltered), - [type === 'nodes' ? 'edges' : 'nodes']: addPlayingTag(anotherFiltered), + [type === 'nodes' ? 'edges' : 'nodes']: addPlayingTag(another), } as unknown as GIGraphData; } diff --git a/packages/gi-assets-scene/src/Timebar/registerMeta.ts b/packages/gi-assets-scene/src/Timebar/registerMeta.ts index 40d6fd8b9..4bf237d58 100644 --- a/packages/gi-assets-scene/src/Timebar/registerMeta.ts +++ b/packages/gi-assets-scene/src/Timebar/registerMeta.ts @@ -160,6 +160,7 @@ const registerMeta = ({ schemaData }) => { enum: [ { label: '过滤', value: 'filter' }, { label: '高亮', value: 'highlight' }, + { label: '显示/隐藏', value: 'show-hide' }, ], default: 'filter', },