Handle Plotly animation #1773

FlorianJacta · 2024-09-10T15:56:39Z

Description

The goal would be to handle Plotly animation inside Taipy or find a workaround for it.

This was asked by a user.

Technical proposal 1 [DOES NOT WORK]

We seem to cover basic use cases with the addition of an animation property that would describe if and how animation would take place.
This property must indicate which dataset columns are animated, and animation properties such as the transition easing and speed.

Use case: I want to change which of the dataset column is represented, animating from the initial one to the next.
Data definition is:

     x = [0, 1, 2, 3]
     y1 = [0, 1, 4, 9]
     y2 = [0, 1, 8, 27]

Animated column value: y_values="y1"

Chart definition is:

      x=x 
      y={y_values}  (so it can be dynamically updated)
      animation={ on="y", duration=1000, easing="linear" }

Meaning:
We are initially showing 'y1' on the 'y' axis.
If 'y' changes to a new column, animate the chart with the indicated parameters.
Now I set 'y_values' to "y2", the chart can animate from the values in 'y1' to the values in 'y2'.

Why it does not work

The problem is y={y_values} that presumes that y is dynamic, which it is not.
Although this would be the panacea, it is not how Taipy GUI charts work, and it would be a mess to change that.

Technical proposal 2

Data definition is:

data = {
     "x": [0, 1, 2, 3],
     "y": [0, 1, 4, 9]
}

We will add an animation_data dynamic property that must be a dataset with only the columns that are animated:

data = {
     "y": [0, 1, 8, 27]
}

When the chart component has this property set, it loads it all, and receives all the columns that are impacted.
Because the "y" columns appears in both datasets, the 'from' and 'to' frames can be built from the two column values.
And animation is performed.

When a new animation_data is sent (with new data, in the same column(s)), we move the 'to' frame to the 'from' frame and recompute the new 'to' frame from the values in the animation_data column(s).

From the user stand point, all that needs to be done is update the animation_data content. The animation is carried immediately.
There should also be a animation_config (or animation for short) dictionary (static) property that can tune the animation parameters such as speed or type.

Acceptance Criteria

Ensure new code is unit tested, and check code coverage is at least 90%.
Create related issue in taipy-doc for documentation and Release Notes.
Check if a new demo could be provided based on this, or if legacy demos could be benefit from it.
Ensure any change is well documented.

Code of Conduct

I have checked the existing issues.
I am willing to work on this issue (optional)

The text was updated successfully, but these errors were encountered:

ScalarJerk · 2024-09-30T14:23:31Z

@FlorianJacta to clarify, we're adding a gui element that allows users to integrate plotly animations, right?

FlorianJacta · 2024-09-30T15:33:20Z

@ScalarJerk I think it could be taken in charge by the chart visual element. What do you think? @FabienLelaquais @FredLL-Avaiga

rakshitmalik136 · 2024-10-01T09:51:02Z

Hey! @ScalarJerk and @FlorianJacta
I want to work on this issue under hacktoberfest. Please assign me this..

FlorianJacta · 2024-10-01T11:52:40Z

@ScalarJerk Was your plan to work on this issue?

rakshitmalik136 · 2024-10-03T17:56:08Z

Hey! @ScalarJerk and @FlorianJacta I want to work on this issue under hacktoberfest. Please assign me this..

@ScalarJerk @FlorianJacta any updates??
shall i start working on it?

FlorianJacta · 2024-10-03T21:44:44Z

Yes, I think you can start working on it. I am assigning you this issue @rakshitmalik136 ! Thank you

rakshitmalik136 · 2024-10-05T10:04:38Z

Just to Clarify, the code that i need to work on, should reside in taipy\frontend\taipy-gui\public\stylekit\elements folder or somewhere else?
@FlorianJacta

taipy\frontend\taipy-gui.../chart.tsx more

THEBOSS0369 · 2024-10-06T15:14:38Z

Hey @rakshitmalik136 ! Are you able to start the server i.e, the gui server for the front-end, if yes can you help me i am unable to start the server. I have been stuck in this problem for 4 days . Please contact me on the discord
This issue on discord

FredLL-Avaiga · 2024-10-06T15:37:12Z

Hey @rakshitmalik136 ! Are you able to start the server i.e, the gui server for the front-end, if yes can you help me i am unable to start the server. I have been stuck in this problem for 4 days . Please contact me on the discord
This issue on discord

You can look at simple example in doc/gui/examples

FredLL-Avaiga · 2024-10-06T17:41:14Z

@FlorianJacta to clarify, we're adding a gui element that allows users to integrate plotly animations, right?

The chart component is located at taipy/frontend/taipy-gui/.../chart.tsx

quest-bot · 2024-10-07T11:30:02Z

New Quest!

A new Quest has been launched in @Avaiga’s repo.
Merge a PR that solves this issue to loot the Quest and earn your reward.

Some loot has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #1773 to link your PR to this Quest.

Questions? Check out the docs.

Handle Plotly animation Avaiga#1773 @quest-bot loot Avaiga#1773

rakshitmalik136 · 2024-10-11T09:14:08Z

@quest-bot loot #1773

quest-bot · 2024-10-11T09:14:11Z

⚠️ Oops... You can only loot in a Pull Request!

Check the docs for more info.

quest-bot · 2024-10-11T09:14:41Z

🧚 @rakshitmalik136 has submitted PR #2019 and is claiming the loot.

Keep up the pace, or you'll be left in the shadows.

Questions? Check out the docs.

mzf11125 · 2024-10-17T18:00:21Z

Hey, I'm interested in helping with this issue. Is it possible? Thanks

mzf11125 · 2024-10-17T18:00:36Z

@quest-bot embark

quest-bot · 2024-10-17T18:00:40Z

@mzf11125 has embarked on their Quest. 🗡

@mzf11125 has been on GitHub since 2021.
They have merged 4 public PRs in that time.
Their swords are blessed with JavaScript and CSS magic ✨
They haven't contributed to this repo before.

This is not an assignment to the issue. Please check the repo’s contribution guidelines before submitting a PR.

Questions? Check out the docs.

github-actions · 2024-11-04T09:06:33Z

This issue has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this issue, please add another comment or create a PR that links to this issue. If a PR has already been created which refers to this issue, then you should explicitly mention this issue in the relevant PR. Otherwise, you will be unassigned in 14 days. For more information please refer to the contributing guidelines.

github-actions · 2024-11-18T09:06:46Z

This issue has been unassigned automatically because it has been marked as "🥶Waiting for contributor" for more than 14 days with no activity.

github-actions · 2025-01-30T09:05:58Z

This issue has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this issue, please add another comment or create a PR that links to this issue. If a PR has already been created which refers to this issue, then you should explicitly mention this issue in the relevant PR. Otherwise, you will be unassigned in 14 days. For more information please refer to the contributing guidelines.

github-actions · 2025-02-13T09:06:21Z

This issue has been unassigned automatically because it has been marked as "🥶Waiting for contributor" for more than 14 days with no activity.

FlorianJacta added 🖰 GUI Related to GUI 🟩 Priority: Low Low priority and doesn't need to be rushed ✨New feature labels Sep 10, 2024

jrobinAV added 🆘 Help wanted Open to participation from the community hacktoberfest labels Sep 27, 2024

FlorianJacta assigned rakshitmalik136 Oct 3, 2024

quest-bot bot added the ⚔️ Quest label Oct 7, 2024

rakshitmalik136 added a commit to rakshitmalik136/taipy that referenced this issue Oct 11, 2024

AnimatedChart.tsx

19a7cec

Handle Plotly animation Avaiga#1773 @quest-bot loot Avaiga#1773

This was referenced Oct 11, 2024

AnimatedChart.tsx rakshitmalik136/taipy#1

Merged

Handle Plotly animation #1773 #2019

Closed

FlorianJacta assigned mzf11125 Oct 21, 2024

github-actions bot added the 🥶Waiting for contributor Issues or PRs waiting for a long time label Nov 4, 2024

github-actions bot unassigned mzf11125 and rakshitmalik136 Nov 18, 2024

github-actions bot removed the 🥶Waiting for contributor Issues or PRs waiting for a long time label Nov 18, 2024

jrobinAV removed hacktoberfest labels Dec 2, 2024

namnguyen20999 self-assigned this Jan 16, 2025

github-actions bot added the 🥶Waiting for contributor Issues or PRs waiting for a long time label Jan 30, 2025

namnguyen20999 linked a pull request Feb 11, 2025 that will close this issue

Chart animation #2443

Open

11 tasks

github-actions bot unassigned namnguyen20999 Feb 13, 2025

github-actions bot removed the 🥶Waiting for contributor Issues or PRs waiting for a long time label Feb 13, 2025

FabienLelaquais linked a pull request Feb 20, 2025 that will close this issue

Chart animation #2443

Open

11 tasks

jrobinAV assigned namnguyen20999 Feb 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Handle Plotly animation #1773

Handle Plotly animation #1773

FlorianJacta commented Sep 10, 2024 •

edited by FabienLelaquais

Loading

ScalarJerk commented Sep 30, 2024

FlorianJacta commented Sep 30, 2024

rakshitmalik136 commented Oct 1, 2024 •

edited

Loading

FlorianJacta commented Oct 1, 2024

rakshitmalik136 commented Oct 3, 2024 •

edited

Loading

FlorianJacta commented Oct 3, 2024

rakshitmalik136 commented Oct 5, 2024 •

edited by FredLL-Avaiga

Loading

THEBOSS0369 commented Oct 6, 2024 •

edited

Loading

FredLL-Avaiga commented Oct 6, 2024 •

edited

Loading

FredLL-Avaiga commented Oct 6, 2024

quest-bot bot commented Oct 7, 2024

rakshitmalik136 commented Oct 11, 2024

quest-bot bot commented Oct 11, 2024

quest-bot bot commented Oct 11, 2024

mzf11125 commented Oct 17, 2024

mzf11125 commented Oct 17, 2024

quest-bot bot commented Oct 17, 2024

github-actions bot commented Nov 4, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Jan 30, 2025

github-actions bot commented Feb 13, 2025

Handle Plotly animation #1773

Handle Plotly animation #1773

Comments

FlorianJacta commented Sep 10, 2024 • edited by FabienLelaquais Loading

Description

Technical proposal 1 [DOES NOT WORK]

Why it does not work

Technical proposal 2

Acceptance Criteria

Code of Conduct

ScalarJerk commented Sep 30, 2024

FlorianJacta commented Sep 30, 2024

rakshitmalik136 commented Oct 1, 2024 • edited Loading

FlorianJacta commented Oct 1, 2024

rakshitmalik136 commented Oct 3, 2024 • edited Loading

FlorianJacta commented Oct 3, 2024

rakshitmalik136 commented Oct 5, 2024 • edited by FredLL-Avaiga Loading

THEBOSS0369 commented Oct 6, 2024 • edited Loading

FredLL-Avaiga commented Oct 6, 2024 • edited Loading

FredLL-Avaiga commented Oct 6, 2024

quest-bot bot commented Oct 7, 2024

New Quest!

rakshitmalik136 commented Oct 11, 2024

quest-bot bot commented Oct 11, 2024

quest-bot bot commented Oct 11, 2024

mzf11125 commented Oct 17, 2024

mzf11125 commented Oct 17, 2024

quest-bot bot commented Oct 17, 2024

github-actions bot commented Nov 4, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Jan 30, 2025

github-actions bot commented Feb 13, 2025

FlorianJacta commented Sep 10, 2024 •

edited by FabienLelaquais

Loading

rakshitmalik136 commented Oct 1, 2024 •

edited

Loading

rakshitmalik136 commented Oct 3, 2024 •

edited

Loading

rakshitmalik136 commented Oct 5, 2024 •

edited by FredLL-Avaiga

Loading

THEBOSS0369 commented Oct 6, 2024 •

edited

Loading

FredLL-Avaiga commented Oct 6, 2024 •

edited

Loading