Skip to content

Commit

Permalink
[ALS-6223] Update getImages function to return Promise
Browse files Browse the repository at this point in the history 
Code changes are made to the getImages function to return a Promise. This allows for better sequencing of operations, and now images are loaded before the creation of visualizations. This addresses potential previously arising issues with images not loading in time for visualization creation.
  • Loading branch information
@Gcolon021
Gcolon021 committed Apr 4, 2024
1 parent fbcce98 commit e94f566
Showing 1 changed file with 63 additions and 58 deletions.
121 changes: 63 additions & 58 deletions biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/visualization-modal-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ define(["jquery", "backbone", "handlebars", "text!search-interface/visualization
this.config = defaultPlotlyConfig;
this.template = HBS.compile(template);
HBS.registerPartial("visualization-image-partial", imageTemplate);
this.getImages();
},
events: {
'click #package-data': 'openPackageData',
Expand All @@ -45,38 +44,40 @@ define(["jquery", "backbone", "handlebars", "text!search-interface/visualization
});
},
getImages: function () {
let query = queryBuilder.createQueryNew(filterModel.get("activeFilters").toJSON(), {}, settings.visualizationResourceId);
query.resourceCredentials = {"Authorization": "Bearer " + JSON.parse(sessionStorage.getItem("session")).token};
queryBuilder.updateConsentFilters(query, settings);

// We need to remove the consent filter for open access as it will reduce the number of results
// and we want to show all results for open access. We just obfuscate the data that is not consented to.
const isOpenAccess = JSON.parse(sessionStorage.getItem('isOpenAccess'));
if (isOpenAccess) {
delete query.query.categoryFilters["\\_consents\\"];
}
return new Promise((resolve, reject) => {
let query = queryBuilder.createQueryNew(filterModel.get("activeFilters").toJSON(), {}, settings.visualizationResourceId);
query.resourceCredentials = {"Authorization": "Bearer " + JSON.parse(sessionStorage.getItem("session")).token};
queryBuilder.updateConsentFilters(query, settings);

// We need to remove the consent filter for open access as it will reduce the number of results
// and we want to show all results for open access. We just obfuscate the data that is not consented to.
const isOpenAccess = JSON.parse(sessionStorage.getItem('isOpenAccess'));
if (isOpenAccess) {
delete query.query.categoryFilters["\\_consents\\"];
}

this.model.set('spinning', true);
$.ajax({
url: window.location.origin + '/picsure/query/sync',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(query),
success: function (response) {
this.model.set('categoricalData', response.categoricalData);
this.model.set('continuousData', response.continuousData);
this.model.set('spinning', false);
response.categoricalData && this.createCategoryPlot();
response.continuousData && this.createContinuousPlot();
this.render();
}.bind(this),
error: function (response) {
this.model.set('spinning', false);
this.model.set('errors', response);
console.error("Viusalzation failed with query: " + JSON.stringify(query), response);
console.error(response);
this.render();
}.bind(this)
this.model.set('spinning', true);
$.ajax({
url: window.location.origin + '/picsure/query/sync',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(query),
success: function (response) {
this.model.set('categoricalData', response.categoricalData);
this.model.set('continuousData', response.continuousData);
this.model.set('spinning', false);
response.categoricalData && this.createCategoryPlot();
response.continuousData && this.createContinuousPlot();
resolve();
}.bind(this),
error: function (response) {
this.model.set('spinning', false);
this.model.set('errors', response);
console.error("Viusalzation failed with query: " + JSON.stringify(query), response);
console.error(response);
reject();
}.bind(this)
});
});
},
getColors: function (num) {
Expand Down Expand Up @@ -328,38 +329,42 @@ define(["jquery", "backbone", "handlebars", "text!search-interface/visualization
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));

// clear the visualizations container
$('#visualizations-container').empty();
// load plotly and create the visualizations
this.loadPlotly().then(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;
// load the images
this.getImages().then(() => {
// load plotly and create the visualizations
this.loadPlotly().then(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;
}
}
}

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;
}
});
Expand Down

0 comments on commit e94f566

Please sign in to comment.