feat: 时间轴支持显示/隐藏模式; fix: 时间轴单个节点或边上若无时间字段，则不应被时间轴影响

antvis · Aug 1, 2023 · eb767c7 · eb767c7
1 parent 6e536fd
commit eb767c7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 34 deletions.
diff --git 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
@@ -25,7 +25,7 @@ type TimebarProps = {
   speed: Speed;
   aggregation: Aggregation;
   /** 播放模式：过滤/高亮 */
-  playMode: 'filter' | 'highlight';
+  playMode: 'filter' | 'highlight' | 'show-hide';
 };
 
 export const Timebar: React.FC<TimebarProps> = ({

diff --git 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<TimebarControlType> = 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
@@ -103,8 +103,6 @@ const TimebarPanel: React.FC<Props> = props => {
     setChartSelectedRange([-Infinity, Infinity]);
   };
 
-  console.log('dataTimes', dataTimes);
-
   return (
     <div className="content">
       <div className="content-header">

diff --git 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<string>([]));
-        anotherFiltered = another.filter(node => allNodesFromEdges.has(node.id));
-      } else {
-        const allEdgesFromNodes = baseFiltered.reduce((acc, cur) => {
-          acc.add(cur.id);
-          return acc;
-        }, new Set<string>([]));
-        anotherFiltered = another.filter(
-          edge => allEdgesFromNodes.has(edge.source) && allEdgesFromNodes.has(edge.target),
-        );
-      }
-    }
-  }
 
   const addPlayingTag = <T>(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
@@ -160,6 +160,7 @@ const registerMeta = ({ schemaData }) => {
       enum: [
         { label: '过滤', value: 'filter' },
         { label: '高亮', value: 'highlight' },
+        { label: '显示/隐藏', value: 'show-hide' },
       ],
       default: 'filter',
     },