Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ALS-5379] Fix actions and variable info modal bugs #260

Merged
merged 2 commits into from
Dec 5, 2023
Merged

[ALS-5379] Fix actions and variable info modal bugs #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d4bb0d8
Fix actions bugs
JamesPeck Dec 5, 2023
3636681
Update biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/…
JamesPeck Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions biodatacatalyst-ui/src/main/webapp/picsureui/overrides/styles.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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