Skip to content

Commit

Permalink
[ALS-5379] Fix actions and variable info modal bugs (#260)
Browse files Browse the repository at this point in the history 
* Fix actions bugs

* Update biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/filter-model.js

Co-authored-by: Gcolon021 <34667267+Gcolon021@users.noreply.github.com>

---------

Co-authored-by: Gcolon021 <34667267+Gcolon021@users.noreply.github.com>
  • Loading branch information
@JamesPeck @Gcolon021
JamesPeck and Gcolon021 authored Dec 5, 2023
1 parent 0f51182 commit 0535032
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 91 deletions.
5 changes: 5 additions & 0 deletions biodatacatalyst-ui/src/main/webapp/picsureui/overrides/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -775,6 +775,11 @@ remove when above bug is fixed */
color: #adadad;
}

.disabled-icon.hidden-icon {
visibility: hidden;
pointer-events: none;
}

.results-panel {
background-color: var(--catalyst-dark-blue);
height: max-content;
Expand Down
29 changes: 18 additions & 11 deletions biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/filter-model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,8 @@ define(["backbone", "handlebars", 'underscore', "picSure/settings", "picSure/que
},
toggleExportField: function (searchResult) {
var existingField = this.get("exportFields").find((filter) => {
return filter.attributes.metadata.columnmeta_var_id === searchResult.result.metadata.columnmeta_var_id;
return filter.attributes.metadata.columnmeta_var_id === searchResult.result.metadata.columnmeta_var_id &&
filter.attributes.metadata.columnmeta_study_id === searchResult.result.metadata.columnmeta_study_id;
});
if (existingField === undefined) {
this.addExportField(searchResult);
Expand All @@ -135,15 +136,17 @@ define(["backbone", "handlebars", 'underscore', "picSure/settings", "picSure/que
});
return existingField !== undefined;
},
isExportFieldFromId: function(varId) {
isExportFieldFromId: function(varId, studyId) {
var existingField = this.get("exportFields").find((filter) => {
return filter.attributes.metadata.columnmeta_var_id === varId;
return filter.attributes.metadata.columnmeta_var_id === varId &&
filter.attributes.metadata.columnmeta_study_id === studyId;
});
return existingField !== undefined;
},
isExportColFromId: function(varId) {
isExportColFromId: function(varId, studyId) {
const existingField = this.get("exportColumns").find((filter) => {
return filter.get('variable').metadata.columnmeta_var_id === varId;
return filter.get('variable').metadata.columnmeta_var_id === varId &&
filter.get('variable').metadata.columnmeta_study_id === studyId;
});
return existingField !== undefined;
},
Expand All @@ -157,9 +160,9 @@ define(["backbone", "handlebars", 'underscore', "picSure/settings", "picSure/que
},
//function specifically for updating only variable and est data point values while in package view without having to run the query
updateExportValues: function () {
let variableCount = _.size(this.get('exportColumns'));
this.set("estDataPoints", variableCount*this.get("totalPatients"));
this.set("totalVariables", variableCount);
let variableCount = _.size(this.get('exportColumns'));
this.set("estDataPoints", variableCount*this.get("totalPatients"));
this.set("totalVariables", variableCount);
},

addGenomicFilter: function(variantInfoFilters, previousUniqueId = 0) {
Expand Down Expand Up @@ -208,7 +211,8 @@ define(["backbone", "handlebars", 'underscore', "picSure/settings", "picSure/que
},
addExportColumn: function(searchResult, type, source, selectedValues, selectedMin, selectedMax){
let existingColumn = _.find(this.get('exportColumns').models, (model)=>{
return model.attributes.variable.metadata.columnmeta_var_id === searchResult.result.metadata.columnmeta_var_id;
return model.get('variable').metadata.columnmeta_var_id === searchResult.result.metadata.columnmeta_var_id &&
model.get('variable').metadata.columnmeta_study_id === searchResult.result.metadata.columnmeta_study_id;
});
if(existingColumn){
existingColumn = existingColumn.attributes;
Expand Down Expand Up @@ -258,10 +262,13 @@ define(["backbone", "handlebars", 'underscore', "picSure/settings", "picSure/que
else{
let column = type ?
_.find(this.get('exportColumns').models, (model)=>{
return model.attributes.variable.metadata.columnmeta_var_id === result.metadata.columnmeta_var_id && model.attributes.type === type;
return model.get('variable').metadata.columnmeta_var_id === result.metadata.columnmeta_var_id &&
model.get('variable').metadata.columnmeta_study_id === result.metadata.columnmeta_study_id &&
model.attributes.type === type;
}) :
_.find(this.get('exportColumns').models, (model)=>{
return model.attributes.variable.metadata.columnmeta_var_id === result.metadata.columnmeta_var_id;
return model.get('variable').metadata.columnmeta_var_id === result.metadata.columnmeta_var_id &&
model.get('variable').metadata.columnmeta_study_id === result.metadata.columnmeta_study_id;
});
if(column){
this.get('exportColumns').remove(column);
Expand Down
2 changes: 1 addition & 1 deletion biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/search-results-view.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
border-top: 1px solid;
}
.search-result-icons {
width: fit-content;
width: max-content;
}
.search-result-icons .glyphicon{
font-size:1.3em;
Expand Down
106 changes: 45 additions & 61 deletions biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/search-results-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,12 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
categoricalFilterModalView, filterModel, tagFilterModel,
modal, variableInfoCache, keyboardNav, tableView, noResultsTemplate, noResultHelpView, DataHierarchyView) {
const SPACE = ' ';
let shouldDisableActions = function (isHarmonized) {
if (isHarmonized) {
let nonHarmonizedFitlers = filterModel.get('activeFilters').filter(filter => {
return filter.get('type') !== 'genomic' && !filter.get('isHarmonized');
});
if (nonHarmonizedFitlers && nonHarmonizedFitlers.length > 0) {
return true;
}
} else {
let harmonizedFitlers = filterModel.get('activeFilters').filter(filter => {
return filter.get('type') !== 'genomic' && filter.get('isHarmonized');
});
if (harmonizedFitlers && harmonizedFitlers.length > 0) {
return true;
}
}
return false;
};
let filterUnwantedResultsOut = function (results) {
return _.filter(results, function(result) {
let metadata = result.result.metadata;
return (!(metadata.columnmeta_var_id.includes('_Parent Study Accession with Subject ID')) && !(metadata.columnmeta_var_id.includes('_Topmed Study Accession with Subject ID')))
});
};
let StudyResultsView = BB.View.extend({
initialize: function (opts) {
this.modalTemplate = HBS.compile(modalTemplate);
Expand Down Expand Up @@ -57,6 +45,7 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
dataHierarchyClickHandler: function (event) {
// We need to get the variable id from the parent element
let varId = $(event.target).data('variable-id');
const studyId = $(event.target).data('study-id');

if (!varId && !event.target.classList.contains('search-result-action-btn')) {
const exportIcon = $(event.target).find('.fa-sitemap.search-result-action-btn').get(0);
Expand All @@ -65,7 +54,7 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
}

let searchResult = _.find(tagFilterModel.get("searchResults").results.searchResults, (result) => {
return varId === result.result.varId;
return varId === result.result.varId && studyId === result.result.studyId;
});

// get the data hierarchy from the search result
Expand Down Expand Up @@ -143,7 +132,7 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
isExcludedTag: isExcludedTag,
isUnusedTag: isUnusedTag,
tagScore: tagScore,
isExportField: filterModel.isExportFieldFromId(variableId),
isExportField: filterModel.isExportFieldFromId(variableId, response.metadata.columnmeta_study_id),
isHarmonized: searchUtil.isStudyHarmonized(response.metadata.columnmeta_study_id.toLowerCase())
};
variableInfoCache[variableId].columnmeta_var_id = variableId;
Expand All @@ -167,13 +156,21 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
infoClickHandler: function (event) {
if (event.target.classList.contains('search-result-action-btn')) {
return;
}
if (event.target.nodeName === 'SPAN') { // user clicked hidden icon
// actions container
event.target = event.target.parentNode;
// search result row
event.target = event.target.parentNode;

}
const rowData = this.searchResultsTable.row(event.target).data();
$('#search-results-datatable').blur();
this.retrieveDataTableMeta(rowData.study_id + '_' + rowData.table_id, function (response) {
this.cacheVariableInfo(response, rowData.variable_id);
this.dataTableInfoView = new dataTableInfoView({
varId: rowData.variable_id,
studyId: rowData.study_id,
metadata: rowData.metadata,
dataTableData: response,
isOpenAccess: JSON.parse(sessionStorage.getItem('isOpenAccess')),
Expand Down Expand Up @@ -204,12 +201,16 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
event.preventDefault();
this.infoClickHandler(event);
}
if (event.key.toLowerCase() === 'h' || event.key.toLowerCase() === 'd') {
this.dataHierarchyClickHandler(event);
}
},
filterClickHandler: function (event) {
if (event.target.classList.contains('disabled-icon')) {
return;
}
let varId = $(event.target).data('variable-id');
const studyId = $(event.target).data('study-id');

//Handle Keyboard event
if (!varId && !event.target.classList.contains('search-result-action-btn')) {
Expand All @@ -219,7 +220,7 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
}

let searchResult = _.find(tagFilterModel.get("searchResults").results.searchResults, (result) => {
return varId === result.result.varId;
return varId === result.result.varId && studyId === result.result.studyId;
});

let filter = filterModel.getByVarId(varId);
Expand Down Expand Up @@ -255,9 +256,10 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
event.target.classList.contains('.glyphicon-log-out.search-result-action-btn'))) {
let target = $(event.target).find('.export-icon');
if (!target.length || target.hasClass('disabled-icon')) return;
resultIndex = $(event.target).get(0).data("result-index");
resultIndex = $(target).data('result-index');
}
let searchResult = tagFilterModel.get("searchResults").results.searchResults[resultIndex];
const filteredResults = filterUnwantedResultsOut(tagFilterModel.get("searchResults").results.searchResults);
const searchResult = filteredResults[resultIndex];
filterModel.toggleExportField(searchResult);
},
generateStudyAccession: function (response) {
Expand Down Expand Up @@ -328,10 +330,10 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
}, {isHandleTabs: true}
);
},
updateExportIcons() {
updateExportIcons: function() {
let results = this.$("#search-results-datatable tbody tr");
_.each(results, (result) => {
if (filterModel.isExportFieldFromId(result.dataset.varId) || filterModel.isExportColFromId(result.dataset.varId)) {
if (filterModel.isExportFieldFromId(result.dataset.varId, result.dataset.studyId) || filterModel.isExportColFromId(result.dataset.varId, result.dataset.studyId)) {
let test = $(result).find('.export-icon');
test.removeClass('glyphicon glyphicon-log-out');
test.addClass('fa-regular fa-square-check');
Expand All @@ -350,11 +352,7 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
}

if (tagFilterModel.get("searchResults")) {
let filteredResults = tagFilterModel.get("searchResults").results.searchResults;
filteredResults = _.filter(filteredResults, function (result) {
let metadata = result.result.metadata;
return (!(metadata.columnmeta_var_id.includes('_Parent Study Accession with Subject ID')) && !(metadata.columnmeta_var_id.includes('_Topmed Study Accession with Subject ID')))
});
let filteredResults = filterUnwantedResultsOut(tagFilterModel.get("searchResults").results.searchResults);
if (JSON.parse(sessionStorage.getItem('isOpenAccess'))) {
filteredResults = _.filter(filteredResults, function (result) {
return result.result.metadata.columnmeta_is_stigmatized === "false";
Expand Down Expand Up @@ -435,10 +433,12 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
.attr('data-sequence', "5")
.attr('data-hashed-var-id', data.hashed_var_id)
.attr('data-var-id', data.variable_id)
.attr('data-study-id', data.study_id)
.attr('id', "first-search-result-row");
} else {
$(row).attr('data-hashed-var-id', data.hashed_var_id)
.attr('data-var-id', data.variable_id);
.attr('data-var-id', data.variable_id)
.attr('data-study-id', data.study_id);
}
},
columnDefs: [
Expand All @@ -451,41 +451,25 @@ define(["backbone", "handlebars", "underscore", "text!search-interface/search-re
render: function (data, type, row, meta) {
let filterTitleText = "Click to configure a filter using this variable.";
let exportTitleText = "Click to add this variable to your data retrieval.";
let isOpenAccess = JSON.parse(sessionStorage.getItem('isOpenAccess'));
let tourAttr;
if (row.result_index == 0) {
tourAttr = 'data-intro="#open-actions-row" data-sequence="6" id="first-actions-row"';
}
if (!JSON.parse(sessionStorage.getItem('isOpenAccess'))) {
let exportClass = 'glyphicon glyphicon-log-out';
if (filterModel.isExportFieldFromId(row.variable_id)) {
exportClass = 'fa-regular fa-square-check';
}
if (tourAttr) {
tourAttr = 'data-intro="#authorized-actions-row" data-sequence="6" id="first-actions-row"';
}

let iconHtml = '<span class="search-result-icons row center"' + tourAttr + '>';

if (row.metadata.data_hierarchy) {
iconHtml += '<i class="fa-solid fa-sitemap search-result-action-btn" data-variable-id="' + row.variable_id + '" title="View Data Tree"></i>';
}

iconHtml += '<i data-table-id="' + row.table_id + '" data-variable-id="' + row.variable_id + '" data-result-index="' + row.result_index + '" title="' + filterTitleText + '" class="fa fa-filter search-result-action-btn"></i><i data-table-id="' + row.table_id + '" data-variable-id="' + row.variable_id + '" data-result-index="' + row.result_index + '" title="' + exportTitleText + '" class="export-icon search-result-action-btn ' + exportClass + '"></i>' +
'</span>';

return iconHtml;
}

let iconHtml = '<span class="search-result-icons row center"' + tourAttr + '>';

if (row.metadata.data_hierarchy) {
iconHtml += '<i class="fa-solid fa-sitemap search-result-action-btn" data-variable-id="' + row.variable_id + '" title="View Data Tree"></i>';
tourAttr = isOpenAccess ? ' data-intro="#open-actions-row"' : ' data-intro="#authorized-actions-row"' + ' data-sequence="6" id="first-actions-row"';
}

iconHtml += '<i data-table-id="' + row.table_id + '" data-variable-id="' + row.variable_id + '" data-result-index="' + row.result_index + '" title="' + filterTitleText + '" class="fa fa-filter search-result-action-btn"></i>' +
'</span>';
let iconHtml = tourAttr ? '<span class="search-result-icons row center"' + tourAttr + '>' : '<span class="search-result-icons row center">';

return iconHtml;
// add data_hierarchy
iconHtml += '<i class="fa-solid fa-sitemap search-result-action-btn ' + (row.metadata.data_hierarchy ? '" title="View Data Tree"' : 'disabled-icon hidden-icon" title="This variable does not have a data hierarchy."') + ' data-variable-id="' + row.variable_id + '" data-study-id="' + row.study_id + '"></i>';
// add filter
iconHtml += '<i data-table-id="' + row.table_id + '" data-variable-id="' + row.variable_id + '" data-study-id="' + row.study_id + '" data-result-index="' + row.result_index + '" title="' + filterTitleText + '" class="fa fa-filter search-result-action-btn"></i>'
// add export
if (!isOpenAccess) {
iconHtml += '<i data-table-id="' + row.table_id + '" data-variable-id="' + row.variable_id + '" data-study-id="' + row.study_id + '" data-result-index="' + row.result_index + '" title="' + exportTitleText + '" class="export-icon search-result-action-btn '
+ (filterModel.isExportFieldFromId(row.variable_id, row.study_id) ? 'fa-regular fa-square-check' : 'glyphicon glyphicon-log-out') + '"></i>';
}
iconHtml += '</span>';
return iconHtml;
},
type: 'string',
targets: 3
Expand Down
Loading

0 comments on commit 0535032

Please sign in to comment.