Add progress bar/circle visual element

[FlorianJacta]

What would that feature address Add progress bar/circle visual element to Taipy: example

Parent issue: #436 Linked to: #551

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

[manojkr19]

Really looking forward to this feature. I've a UI that pulls data, which may have a few seconds to a min. Need to provide some feedback to the user while they are waiting.

[FlorianJacta]

For the meantime, you can use the notify function to create a notification saying that the user has to wait.

[FlorianJacta]

Another user on Discord asked for it again. I am moving this to High as a result.

[chialiotta]

Hi, I would like to contribute to this issue. Could you please assign it to me?

[FabienLelaquais]

That is great news Chiara! You are going to need Python, Typescript, React, and MUI, but that should be fun!

We would like a new control called 'progress', using the referenced MUI component. We'll improve on the requirements when something is usable on the front-end.

Welcome to Taipy!

[FredLL-Avaiga]

Do not hesitate to ask questions here 😎

[chialiotta]

Great, thank you! Will do :)

[chialiotta]

Hello, I have started to work on the React components, however, I want to make sure I'm taking all the steps required. I have made a .tsx and .spec.tsx and from what I understand I now need to update factory.py and then tests to both tests/gui/builder/control and tests/gui/control. What exactly is the difference between these last two? Also, maybe a dumb question, but how can I locally visually test out the generation of the new component?

[FredLL-Avaiga]

test/gui/builder/control uses the Builder API while test/gui/control uses Markdown/HTML Don't forget to update the viselements.json file (used in the doc for for API generation)

Once you've built the front-end bundle To test, you can create a demo python file at the root of the repo and it will use the current version of Taipy without installing it

[chialiotta]

I built the frontend bundle and created a demo file, but it tells me that the new component is not registered. How am I supposed to register it?

[FredLL-Avaiga]

There's an export.ts file I think

[chialiotta]

Unfortunately that doesn't seem to fix it

[yaten2302]

What would that feature address Add progress bar/circle visual element to Taipy: example

Parent issue: #436 Linked to: #551

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

Hey @FlorianJacta, actually I was reading about this issue, but I was not able to understand this completely, could you please guide that where this visual element has to be added, like in what sense? And @chialiotta since you've previously worked on this issue, could you also please guide me regarding this, maybe we can work on this together?

[FredLL-Avaiga]

Unfortunately that doesn't seem to fix it

Sorry, you need to add your component in the list in index.ts

[FlorianJacta]

@yaten2302 Taipy relies on visual elements to bring interactivity to the GUI. These visual elements come from different Javascript libraries (MUI, for example). The goal is to incorporate another visual element into Taipy natively.

You can read about the extension API here. This API enables you to extend Taipy with a new object. However, we would want to add Taipy directly here. Maybe, @FredLL-Avaiga or @FabienLelaquais could help you with that

[yaten2302]

Hey @FlorianJacta, if I've understood this correctly, what exactly we've to do is that, we've to create 2 new files in this dir named - Circle.tsx and Circle.spec.tsx(for testing). We're basically incorporating a new visual element in Taipy, right?

[FlorianJacta]

I think @chialiotta is working on this issue. Are you still working on it? Please let me know if you need any help.

If you are not, we could maybe assign you @yaten2302 and provide you with more explanation to keep things organized.

[yaten2302]

Sure @FlorianJacta , if no one is working on this, I'll definitely work on this issue👍

[chialiotta]

Hey, I was working on this, but I don’t have time right now to finish it, so if you want to take over @yanten2302 you are welcome to

---

From: Yaten Dhingra @.> Sent: Wednesday, May 15, 2024 3:59:54 PM To: Avaiga/taipy @.> Cc: Liotta, Chiara @.>; Mention @.> Subject: Re: [Avaiga/taipy] Add progress bar/circle visual element (Issue #692)

Sure @FlorianJactahttps://github.com/FlorianJacta , if no one is working on this, I'll definitely work on this issue👍

— Reply to this email directly, view it on GitHubhttps://github.com/Avaiga/taipy/issues/692#issuecomment-2112628186, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANKTFWULKGHSLJQ43Z5K2JDZCNS5VAVCNFSM6AAAAABB4QMMI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJSGYZDQMJYGY. You are receiving this because you were mentioned.Message ID: @.***>

[yaten2302]

Hey @FlorianJacta, could you please assign this issue to me, I want to work on it.

[FredLL-Avaiga]

Welcome @yaten2302
do not hesitate to ask questions here.

[yaten2302]

Thank you so much @FredLL-Avaiga for your help. Sure, I'll definitely ask if I encounter any problem or doubt. Currently I'm trying to understand the Button.tsx and Button.spec.tsx file in frontend dir. Then I'll start with the new element i.e. the progress bar 👍🏼

[FredLL-Avaiga]

For your information, Once, your happy with the tsx component, you need to declare it in

• taipy\gui\_renderers\factory.py and frontend\taipy-gui\src\components\Taipy\index.ts

[yaten2302]

Hey @FredLL-Avaiga, to get started by developing the front-end part, I've to install both of these right? - Taipy Front-end and Taipy GUI Front-end

[FredLL-Avaiga]

fine, but you don't need Taipy front-end as it concerns core visual elements (scenario_selector ...)

[yaten2302]

Hey @FredLL-Avaiga, actually I've a doubt, could you clarify this? Like, for the progress bar, by default(if there are no params entered by the user) the element rendered will be this(the circular indeterminate one), right?

And if the user enters the params like - color, show_progress, then the element rendered will be like this:

[FredLL-Avaiga]

You're right I'm not sure we want a color property but I'm sure we want a circular and another linear with the same element name

[yaten2302]

Got it 👍🏼 I'll leave the color property for now and will add the circular and the linear progress bars👍🏼

[yaten2302]

Hey @FredLL-Avaiga, actually I was having a doubt, if I want to run only a specific file let's say - Button.tsx, then how can I do that? I'm asking this because I want to check the new element (it's not complete right now, but I just wanted to do a dry run kind of thing).

[FredLL-Avaiga]

For your information, Once, your happy with the tsx component, you need to declare it in

• taipy\gui\_renderers\factory.py and frontend\taipy-gui\src\components\Taipy\index.ts

You declare your component in those files And then you add it to a really page in python

[yaten2302]

Hey @FredLL-Avaiga, I'm creating a draft PR to show the changes that I've made till now. It's not complete, but I just wanted to confirm if I'm doing everything right or do I need to change something. Could you please review the draft PR and then guide if there's some mistake? Also, I wanted to ask that, do I've to push the package-lock.json file as well? It was created when I was installing Taipy GUI Front-end

[FredLL-Avaiga]

I will, you just have to add me as a reviewer. Don't bother with the package-lock.json

[yaten2302]

@FredLL-Avaiga, actually I'm facing an issue while pushing my code, could you please help me out with this. I've pushed the changes, but I'm not able to see them to create a PR. Here's the screenshots:

[yaten2302]

Hey @FredLL-Avaiga, I guess there's some issue while creating a PR, I'll just delete my fork and create a new one and then submit the draft PR. Apologies for inconvenience🙏🏼

[yaten2302]

Hey @FredLL-Avaiga, I've created a draft PR for this issue, could you please have a look at the ProgressBar.tsx if I'm doing it right or do I've to change something in it?

[yaten2302]

Hey @FredLL-Avaiga, @FabienLelaquais, really sorry for the delay. I've now created a new PR for the changes which were suggested and also added the complete functionality as discussed. The progress bar now has multiple options including - linear progress bar, show progress, and number of progress bars to be shown. If any changes are required, kindly let me know, I'll make the required changes ASAP 👍🏼 Also, if this PR looks fine, may I start working on the tests?

[github-actions[bot]]

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.