Update progress bar from Clicklistener

I have been going through the documentation regarding asynchronous push from the server to the client.
As a small test I am trying to perform an update on the progress bar when performing a small analysis.

The MainLayout has been added to add the PushMode to manual so we can control when to push / sync with the user interface.

The Analysis class contains the layout for the analysis page and the functions for the analsys (for now).

When running the interface and click the button to activate the listener it performs the “analysis” but only syncs at the end.

@HtmlImport("frontend://styles/shared-styles.html")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@Push(PushMode.MANUAL)
public class MainLayout extends Div implements RouterLayout, PageConfigurator {
...
}
@Route(value = "analysis", layout = MainLayout.class)
public class Analysis extends Div {
}
    private UI ui = UI.getCurrent();

    public Analysis() {
		...
		analysisPage.add(analysisView());
		...
	}
	
	private VerticalLayout analysisView() {
		...
		phyloTree.addClickListener(event -> {
            Notification.show("Performing phyloTree analysis: " + event.toString());

            double totalSize = genomesGrid.getSelectedItems().size();
            double position = 0.0;
            for (Genome genome : genomesGrid.getSelectedItems()) {
                position = position + 1;
                double finalPosition = position / totalSize;

                Init.logger.info(genome.getSpecies());
                Init.logger.info("Final position: " + finalPosition);

                ui.access(() -> {
                    progressBar.setValue(finalPosition);
                    ui.push();
                    Init.logger.info("...pushed...");
                });

                try {
                    TimeUnit.SECONDS.sleep(1);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        });
	...
	}

The main class is located at: https://gitlab.com/sapp/SAGeR/blob/vaadin10/src/main/java/nl/wur/ssb/sagerp/ui/MainLayout.java

and the analysis class at:

https://gitlab.com/sapp/SAGeR/blob/vaadin10/src/main/java/nl/wur/ssb/sagerp/ui/views/analysis/Analysis.java

Hi Jasper,

I am not sure if your problem is the same but in the forum there is a similar post.

https://vaadin.com/forum/thread/17184035/how-to-make-components-not-to-change-simultaneously-from-click-event

The solution:

https://vaadin.com/docs/v10/flow/advanced/tutorial-push-access.html

You can create and use a thread that can access the UI and update the progress bar.

Thanks indeed, I copied the entire class and started modifying it.
It took me a while to figure out how to lock a session which in the end was fairly simple. ui.getSession().lock();
and of course unlock when done. This was needed to modify the progress bar instead of adding new elements everytime.