Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Timeline: Performance issues with large datasets

See original GitHub issue

The timeline component is not usable anymore for larger datasets

1) Environment

PrimeFaces version: PrimeFaces-8.0
Application server + version: Mojarra-2.3.13
OS on the client: Ubuntu 18.04.3 LTS

2) Expected behavior

The timeline (tested with around 9500 datasets) should render the timeline within a reasonable amount of time (e.g., < 2s). In PF7, this was no problem at all.

3) Actual behavior

The timeline (tested with around 9500 datasets) takes extremely long to render (up to 2min). It is also visible in the console where it shows: [Violation] ‘requestAnimationFrame’ handler took 107511ms This happens as PF redraws the items via the vis.js library …

4) Steps to reproduce

Simply use a large enough number of items in the timeline.

5) Sample XHTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
  <title>PrimeFaces Test</title>
</h:head>
<h:body>

  <p:timeline
    id="timeline"
    value="#{basicTimelineView.model}"
    height="250px"
    selectable="#{basicTimelineView.selectable}"
    zoomable="#{basicTimelineView.zoomable}"
    moveable="#{basicTimelineView.moveable}"
    stackEvents="#{basicTimelineView.stackEvents}"
    axisOnTop="#{basicTimelineView.axisOnTop}"
    eventStyle="#{basicTimelineView.eventStyle}"
    showCurrentTime="#{basicTimelineView.showCurrentTime}">
  </p:timeline>

</h:body>
</html>

6) Sample Bean

@Named("basicTimelineView")
@ViewScoped
public class TestView implements Serializable {

    private boolean axisOnTop;

    private String eventStyle = "box";

    private TimelineModel<String, ?> model;

    private boolean moveable = true;

    private boolean selectable = true;

    private boolean showCurrentTime = true;

    private boolean showNavigation = false;

    private boolean stackEvents = true;

    private boolean zoomable = true;

    public String getEventStyle() {
        return eventStyle;
    }

    /**
     * Get model.
     *
     * @return the model
     */
    public TimelineModel<String, ?> getModel() {
        return model;
    }

    @PostConstruct
    protected void initialize() {
        model = new TimelineModel<>();

        long startTime = System.currentTimeMillis();
        for (int year = 2010; year < 2021; year++) {
            for (int month = 1; month < 12; month++) {
                for (int day = 1; day < 26; day++) {
                    String dateString = year + "_" + month + "_" + day;
                    model.add(TimelineEvent.<String>builder().data(dateString).startDate(LocalDate.of(year, month, day)).build());
                }
            }
        }

        long endTime = System.currentTimeMillis();
        long duration = endTime - startTime;
        System.out.println("nodes == " + model.getEvents().size());
        System.out.println("duration for node generation on server in ms == " + duration);
    }

    public boolean isAxisOnTop() {
        return axisOnTop;
    }

    public boolean isMoveable() {
        return moveable;
    }

    public boolean isSelectable() {
        return selectable;
    }

    public boolean isShowCurrentTime() {
        return showCurrentTime;
    }

    public boolean isShowNavigation() {
        return showNavigation;
    }

    public boolean isStackEvents() {
        return stackEvents;
    }

    public boolean isZoomable() {
        return zoomable;
    }

    public void setAxisOnTop(boolean axisOnTop) {
        this.axisOnTop = axisOnTop;
    }

    public void setEventStyle(String eventStyle) {
        this.eventStyle = eventStyle;
    }

    /**
     * Set model.
     *
     * @param model the model to set
     */
    public void setModel(TimelineModel<String, ?> model) {
        this.model = model;
    }

    public void setMoveable(boolean moveable) {
        this.moveable = moveable;
    }

    public void setSelectable(boolean selectable) {
        this.selectable = selectable;
    }

    public void setShowCurrentTime(boolean showCurrentTime) {
        this.showCurrentTime = showCurrentTime;
    }

    public void setShowNavigation(boolean showNavigation) {
        this.showNavigation = showNavigation;
    }

    public void setStackEvents(boolean stackEvents) {
        this.stackEvents = stackEvents;
    }

    public void setZoomable(boolean zoomable) {
        this.zoomable = zoomable;
    }
}

The given sample always takes around 28k to 39k milliseconds to render.

I already used the vis.js library in another project in 2015 and the number of nodes in a graph for example presented already a limitation.