From 77ba3482308e5a663e531b1137c78befd0787ae0 Mon Sep 17 00:00:00 2001 From: Gcolon021 <34667267+Gcolon021@users.noreply.github.com> Date: Mon, 18 Dec 2023 15:20:16 -0500 Subject: [PATCH 1/3] [ALS-5456] Implement lazy load for Plotly in visualization-modal-view (#263) This update modifies the visualization-modal-view.js file, moving Plotly from the main module dependencies to a new loadPlotly method. This approach lazily loads the Plotly library only when the modal is opened, optimizing the loading process. Modifications also include necessary adjustments to the render method to incorporate the new loadPlotly functionality. --- .../visualization-modal-view.js | 57 +++++++++++-------- 1 file changed, 33 insertions(+), 24 deletions(-) diff --git a/biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/visualization-modal-view.js b/biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/visualization-modal-view.js index 87c85cc0..4c7c8c2e 100644 --- a/biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/visualization-modal-view.js +++ b/biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/visualization-modal-view.js @@ -1,5 +1,5 @@ -define(["jquery", "backbone", "handlebars", "text!search-interface/visualization-modal-view.hbs", "search-interface/filter-model", "picSure/queryBuilder", "text!search-interface/visualization-image-partial.hbs", "picSure/settings", "common/spinner", "plotly"], - function ($, BB, HBS, template, filterModel, queryBuilder, imageTemplate, settings, spinner, plotly) { +define(["jquery", "backbone", "handlebars", "text!search-interface/visualization-modal-view.hbs", "search-interface/filter-model", "picSure/queryBuilder", "text!search-interface/visualization-image-partial.hbs", "picSure/settings", "common/spinner"], + function ($, BB, HBS, template, filterModel, queryBuilder, imageTemplate, settings, spinner) { let defaultModel = BB.Model.extend({ defaults: { spinnerClasses: "spinner-medium spinner-medium-center ", @@ -319,34 +319,43 @@ define(["jquery", "backbone", "handlebars", "text!search-interface/visualization this.data.layouts.push(layout); }); }, + loadPlotly: function (callback) { + require(['plotly'], function (plotly) { + callback(plotly); + }); + }, render: function () { + // lazy load plotly js when the modal is opened this.$el.html(this.template(this.model.toJSON())); - for (let i = 0; i < this.data.traces.length; i++) { - let plot = document.createElement('div'); - let screenReaderText = 'Histogram showing the visualization of '; - - // We need to do this because the traces are a 2d array. As long as one of the traces is categorical, - // we need to add the screen reader text - let unformatedTitle; - for (let j = 0; j < this.data.traces[i].length; j++) { - if (this.data.traces[i][j].isCategorical) { - screenReaderText = 'Column chart showing the visualization of '; - } + this.loadPlotly((plotly) => { + for (let i = 0; i < this.data.traces.length; i++) { + let plot = document.createElement('div'); + let screenReaderText = 'Histogram showing the visualization of '; + + // We need to do this because the traces are a 2d array. As long as one of the traces is categorical, + // we need to add the screen reader text + let unformatedTitle; + for (let j = 0; j < this.data.traces[i].length; j++) { + if (this.data.traces[i][j].isCategorical) { + screenReaderText = 'Column chart showing the visualization of '; + } - if (this.data.traces[i][j].unformatedTitle) { - unformatedTitle = this.data.traces[i][j].unformatedTitle; - break; + if (this.data.traces[i][j].unformatedTitle) { + unformatedTitle = this.data.traces[i][j].unformatedTitle; + break; + } } + + plot.setAttribute('id', 'plot' + i); + plot.setAttribute('aria-label', screenReaderText + unformatedTitle); + plot.setAttribute('title', 'Visualization of ' + unformatedTitle); + plot.classList.add('image-container'); + document.getElementById('visualizations-container').appendChild(plot); + this.config.toImageButtonOptions.filename = unformatedTitle; + plotly.newPlot(plot, this.data.traces[i], this.data.layouts[i], this.config); } + }); - plot.setAttribute('id', 'plot' + i); - plot.setAttribute('aria-label', screenReaderText + unformatedTitle); - plot.setAttribute('title', 'Visualization of ' + unformatedTitle); - plot.classList.add('image-container'); - document.getElementById('visualizations-container').appendChild(plot); - this.config.toImageButtonOptions.filename = unformatedTitle; - plotly.newPlot(plot, this.data.traces[i], this.data.layouts[i], this.config); - } return this; } }); From 82e6fcea0d5c1844b8fccba79df6aa141e54505a Mon Sep 17 00:00:00 2001 From: Gcolon021 <34667267+Gcolon021@users.noreply.github.com> Date: Wed, 20 Dec 2023 16:03:24 -0500 Subject: [PATCH 2/3] Render template earlier in landing.js (#265) The order of operations has been altered in the landing.js file of the BioDataCatalyst UI. The current changes involve rendering the template right after the function is invoked rather than waiting until the end. This reordering will allow the loading icons to display until all ajax request are complete. --- .../src/main/webapp/picsureui/landing/landing.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/biodatacatalyst-ui/src/main/webapp/picsureui/landing/landing.js b/biodatacatalyst-ui/src/main/webapp/picsureui/landing/landing.js index 0d8c26c2..ac2b6efa 100644 --- a/biodatacatalyst-ui/src/main/webapp/picsureui/landing/landing.js +++ b/biodatacatalyst-ui/src/main/webapp/picsureui/landing/landing.js @@ -34,6 +34,8 @@ define(["underscore", "jquery", "backbone", "handlebars", "text!landing/landing. window.location.href = "/picsureui/queryBuilder"; }, render: function () { + this.$el.html(this.template()); + // get counts for studies and participants let records = studyUtility.groupRecordsByAccess(); @@ -97,7 +99,6 @@ define(["underscore", "jquery", "backbone", "handlebars", "text!landing/landing. spinner.medium(deferredParticipants, "#authorized-participants-spinner", "spinner2"); spinner.medium(deferredParticipants, "#authorized-studies-spinner", "spinner2"); - this.$el.html(this.template()); return this; } }); From 41618a9298bc69d808fad1eabeea3fe7d20f56dd Mon Sep 17 00:00:00 2001 From: James Date: Thu, 21 Dec 2023 09:53:47 -0500 Subject: [PATCH 3/3] bump junit --- biodatacatalyst-ui/pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/biodatacatalyst-ui/pom.xml b/biodatacatalyst-ui/pom.xml index 725377eb..c430b235 100644 --- a/biodatacatalyst-ui/pom.xml +++ b/biodatacatalyst-ui/pom.xml @@ -19,7 +19,7 @@ junit junit - 4.12 + 4.13.2 test