VIVO-1689: Tenderfoot publications chart is slow to load

[chenejac]

Benjamin Gross (Migrated from VIVO-1689) said:

The Tenderfoot histogram visualization is not generated until the rest of the page has been loaded.

I think this is because the javascript that pulls the data is triggered using the 'onload' function.

[https://github.com/vivo-project/VIVO/blob/d5934d2e4091a0c514c1963d51a2db32576657fa/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-visualizationFoafPerson.ftl#L30]

This is especially bad if an image or a non-async js include is slow to load.

[chenejac]

Benjamin Gross said:

I think it's safe to remove the 'onload' listener and instead simply call the renderPublicationsChart() function from below the svg directly.

Though I do wonder if there might be other events happening that change the height and width of the chart, we can also wait for the DOM to be loaded, then run it a la

....
        <script>
            var dataUrl = '${urls.base}/visualizationAjax?vis=cumulative_pub_count&uri=${individual.uri?url}';
            document.addEventListener("DOMContentLoaded", function(e) {
               renderPublicationsChart();
              });

            function renderPublicationsChart() {
....

  If that's the case we should figure out a way to gather the data from visualizationAjax separately from the rendering code that allows us to trigger the SPARQL queries as soon as the page is requested.

[chenejac]

Graham Triggs said:

In general, the use of onload here should not be that bad - yes, it runs after the page is loaded, but an awful lot of the delays to seeing a page are incurred before the main html is rendered. It's possible that a slow image or asynchronous JS load may delay it, but optimizing those - ensuring the size isn't too large, preferring to retrieve from the same server rather than external, etc. - is beneficial in it's own right, not just for minimizing delays to the chart rendering.

What we do want is for the chart to be rendered asynchronously (because it shouldn't add to the delay before you see anything of the page), but you can't insert it into the page until the DOM is ready.

[chenejac]

Benjamin Gross said:

I think we are in agreement... the best solution is to asynchronously retrieve the data then add the visualization after the DOM is loaded.

I agree that it's best practice to minimize page size and keep assets locally, but it doesn't always happen in practice. E.g. if faculty photos sit on a central institutional server you don't control.