[Feat]: History Timebar
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the feature / 功能描述
## What I want to have
It would be nice to have a plugin that tracks changes of the graph and adds a timebar where the user can go back in time to view a previous state of the graph.
## Problem
While using the timebar I stumbled across some problems with the current implementation of the timebar. One problem would be that the timebar is not recognizing the past correctly. For example if you remove edges, they are not added back when displaying the past. That is because "originalData" is just a single GraphData object and not a list of GraphData objects and it is then filtered to get the current items (https://github.com/antvis/G6/blob/v5/packages/g6/src/plugins/timebar.ts#L354). That all makes it hard to use that plugin for maintaining a history.
## Improvement
It might be better to replace the originalData with a list. The list is then the history of the graph and would also make the getTime method superfluous.
I think it would be better to add a new plugin for that history timebar, because it would be hard to integrate the range of timestamps feature into it. Also it would have a totally different api for the developers.
## Additional Improvements
It would also be nice to have a postFilter or postUpdate function that you can add to the options. In my case I wanted to rerun the layout method after each step of the timebar.
### Are you willing to contribute? / 是否愿意参与贡献?
✅ Yes / 是
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading packages/g6/src/plugins/timebar.ts, especially the originalData filtering around line 354 and the getTime behavior. Define the history timebar’s separate API and determine how postFilter or postUpdate should work; done means removed edges can be restored when viewing earlier graph states and the requested update hook supports rerunning layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100