[feature] Timeline date range controller

[rapee]

Feature

Describe this feature

Create a timeline date range controller to visualize "time" in this civil movement.

It will be used for 2 purposes:

1. Flower viz auto plays on first run [#5]. It should be synced with this controller.
2. User can drag start and end handlers, and the date range itself. The flower viz will show only the nodes that are inside the range.

When user drags, the controller should pass start-end date range to the Flower viz [#2]

From left to right: play button, pause button, drag handler, reply button.

Why is it needed?

It looks cool than other websites.

Suggested solution

• It is arguable that the controller should be synced on the flower viz's first run. If you consider it's too difficult, it's also acceptable to hide the controller first, then only after the auto play completes that we'll show the controller.

Related issue/PR

• #2
• #5

Related Resources

• Figma design

[thasarito]

To-Dos:

• add tooltips
• make timeline's width scaled by number of days in month
• add play pause functionality