Skip to content

Commit

Permalink
Add support for Reactome Query
Browse files Browse the repository at this point in the history 
Users can now make query by Reactome ID to import corresponding pathway in SBGN format
  • Loading branch information
@hasanbalci
hasanbalci committed Jul 9, 2024
1 parent bfe3f87 commit 5d25c88
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 1 deletion.
9 changes: 8 additions & 1 deletion app/js/app-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ var _ = require('underscore');
module.exports = function() {
var dynamicResize = appUtilities.dynamicResize.bind(appUtilities);

var layoutPropertiesView, generalPropertiesView, neighborhoodQueryView, pathsBetweenQueryView, pathsFromToQueryView, commonStreamQueryView, pathsByURIQueryView, mapByWPIDQueryView, promptSaveView, promptConfirmationView,
var layoutPropertiesView, generalPropertiesView, neighborhoodQueryView, pathsBetweenQueryView, pathsFromToQueryView, commonStreamQueryView, pathsByURIQueryView, mapByWPIDQueryView, mapByReactomeIDQueryView, promptSaveView, promptConfirmationView,
promptMapTypeView, promptInvalidTypeWarning, promtErrorPD2AF, promptInvalidFileView, promptFileConversionErrorView, promptInvalidURIWarning, reactionTemplateView, gridPropertiesView, fontPropertiesView, fileSaveView,saveUserPreferencesView, loadUserPreferencesView, sifMapWarning;

function validateSBGNML(xml) {
Expand Down Expand Up @@ -151,6 +151,7 @@ module.exports = function() {
commonStreamQueryView = appUtilities.commonStreamQueryView = new BackboneViews.CommonStreamQueryView({el: '#query-commonstream-table'});
pathsByURIQueryView = appUtilities.pathsByURIQueryView = new BackboneViews.PathsByURIQueryView({el: '#query-pathsbyURI-table'});
mapByWPIDQueryView = appUtilities.mapByWPIDQueryView = new BackboneViews.MapByWPIDQueryView({el: '#query-mapbyWPID-table'});
mapByReactomeIDQueryView = appUtilities.mapByReactomeIDQueryView = new BackboneViews.MapByReactomeIDQueryView({el: '#query-mapbyReactomeID-table'});
//promptSaveView = appUtilities.promptSaveView = new BackboneViews.PromptSaveView({el: '#prompt-save-table'}); // see PromptSaveView in backbone-views.js
fileSaveView = appUtilities.fileSaveView = new BackboneViews.FileSaveView({el: '#file-save-table'});
saveUserPreferencesView = appUtilities.saveUserPreferencesView = new BackboneViews.SaveUserPreferencesView({el: '#user-preferences-save-table'});
Expand All @@ -168,7 +169,9 @@ module.exports = function() {
infoboxPropertiesView = appUtilities.infoboxPropertiesView = new BackboneViews.InfoboxPropertiesView({el: '#infobox-properties-table'});
promptInvalidURIView = appUtilities.promptInvalidURIView = new BackboneViews.PromptInvalidURIView({el: '#prompt-invalidURI-table'});
promptInvalidWPIDView = appUtilities.promptInvalidWPIDView = new BackboneViews.PromptInvalidWPIDView({el: '#prompt-invalidWPID-table'});
promptInvalidReactomeIDView = appUtilities.promptInvalidReactomeIDView = new BackboneViews.PromptInvalidReactomeIDView({el: '#prompt-invalidReactomeID-table'});
promptInvalidURIWarning = appUtilities.promptInvalidURIWarning = new BackboneViews.PromptInvalidURIWarning({el: '#prompt-invalidURI-table'});
promptInvalidReactomeIDWarning = appUtilities.promptInvalidReactomeIDWarning = new BackboneViews.PromptInvalidReactomeIDWarning({el: '#prompt-invalidReactomeID-table'});
promptInvalidWPIDWarning = appUtilities.promptInvalidWPIDWarning = new BackboneViews.PromptInvalidWPIDWarning({el: '#prompt-invalidWPID-table'});
promptInvalidURLWarning = appUtilities.promptInvalidURLWarning = new BackboneViews.PromptInvalidURLWarning({el: '#prompt-invalidURL-table'});
promptInvalidImageWarning = appUtilities.promptInvalidImageWarning = new BackboneViews.PromptInvalidImageWarning({el: '#prompt-invalidImage-table'});
Expand Down Expand Up @@ -1321,6 +1324,10 @@ module.exports = function() {
mapByWPIDQueryView.render();
});

$("#query-mapbyReactomeID").click(function (e) {
mapByReactomeIDQueryView.render();
});

$("#grid-properties").click(function (e) {
gridPropertiesView.render();
});
Expand Down
188 changes: 188 additions & 0 deletions app/js/backbone-views.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3330,6 +3330,146 @@ var MapByWPIDQueryView = Backbone.View.extend({
},
});

/**
* Map By Reactome ID Query view for the Sample Application.
*/
var MapByReactomeIDQueryView = Backbone.View.extend({
defaultQueryParameters: {
ReactomeID: "",
},
currentQueryParameters: null,
initialize: function () {
var self = this;
self.copyProperties();
self.template = _.template($("#query-mapbyReactomeID-template").html());
self.template = self.template(self.currentQueryParameters);
},
copyProperties: function () {
this.currentQueryParameters = _.clone(this.defaultQueryParameters);
},
render: function () {
var self = this;
self.template = _.template($("#query-mapbyReactomeID-template").html());
self.template = self.template(self.currentQueryParameters);
$(self.el).html(self.template);

$(self.el).modal("show");

$(document)
.off("click", "#save-query-mapbyReactomeID")
.on("click", "#save-query-mapbyReactomeID", function (evt) {
// use the active chise instance
var chiseInstance = appUtilities.getActiveChiseInstance();

// use the associated cy instance
var cy = chiseInstance.getCy();

self.currentQueryParameters.ReactomeID = document.getElementById(
"query-mapbyReactomeID-ReactomeID"
).value;
var reactomeid = self.currentQueryParameters.ReactomeID.trim();

if (reactomeid.length === 0) {
document.getElementById("query-mapbyReactomeID-ReactomeID").focus();
return;
}
// reactomeid is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
reactomeid = reactomeid.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim();
if (reactomeid.length === 0) {
$(self.el).modal("toggle");
new PromptInvalidReactomeIDView({ el: "#prompt-invalidReactomeID-table" }).render();
return;
}

var queryURL = "https://reactome.org/ContentService/exporter/event/" + reactomeid + ".sbgn";

var filename = "";

if (filename == "") {
filename = reactomeid;
} else {
filename = filename + "_" + reactomeid;
}
filename = filename + ".nwt";

var sendMapByReactomeIDQuery = function () {
var currentGeneralProperties = appUtilities.getScratch(cy, "currentGeneralProperties");
var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
var currentLayoutProperties = appUtilities.getScratch(cy, "currentLayoutProperties");

chiseInstance.startSpinner("map-byReactomeID-spinner");
$.ajax({
type: "get",
url: "/utilities/testURL",
data: { url: queryURL },
success: function (data) {
if (!data.error && data.response.statusCode == 200) {
if (data.response.body !== "") {
var xml = $.parseXML(data.response.body);
$(document).trigger("sbgnvizLoadFile", [filename, cy]);
currentGeneralProperties.inferNestingOnLoad = true;
chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, undefined);
currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
$(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
chiseInstance.endSpinner("map-byReactomeID-spinner");
} else {
new PromptEmptyQueryResultView({
el: "#prompt-emptyQueryResult-table",
}).render();
}
} else if (data.error) {
let { code } = data.error;
if (code === "ESOCKETTIMEDOUT") {
new PromptRequestTimedOutView({
el: "#prompt-requestTimedOut-table",
}).render();
}
chiseInstance.endSpinner("map-byReactomeID-spinner");
}
else if (!data.error && data.response.statusCode == 500){
new InternalServerError({
el: "#prompt-internal-server-table",
}).render();
chiseInstance.endSpinner("map-byReactomeID-spinner");
}
else {
new PromptInvalidReactomeIDView({
el: "#prompt-invalidReactomeID-table",
}).render();
chiseInstance.endSpinner("map-byReactomeID-spinner");
}
},
error: function (xhr, options, err) {
new PromptInvalidReactomeIDView({
el: "#prompt-invalidReactomeID-table",
}).render();
chiseInstance.endSpinner("map-byReactomeID-spinner");
},
});

$(self.el).modal("toggle");
}

if (cy.nodes().length != 0) {
new PromptConfirmationView({
el: "#prompt-confirmation-table",
}).render(sendMapByReactomeIDQuery);
} else {
sendMapByReactomeIDQuery();
}

});

$(document)
.off("click", "#cancel-query-mapbyReactomeID")
.on("click", "#cancel-query-mapbyReactomeID", function (evt) {
$(self.el).modal("toggle");
});

return this;
},
});

/*
There was a side effect of using this modal prompt when clicking on New.
If the user would click on save, then the save box asking for the filename (FileSaveView) would appear
Expand Down Expand Up @@ -4517,6 +4657,29 @@ var PromptInvalidWPIDView = Backbone.View.extend({
},
});

var PromptInvalidReactomeIDView = Backbone.View.extend({
initialize: function () {
var self = this;
self.template = _.template($("#prompt-invalidReactomeID-template").html());
},
render: function () {
var self = this;
self.template = _.template($("#prompt-invalidReactomeID-template").html());

$(self.el).html(self.template);
$(self.el).modal("show");

$(document)
.off("click", "#prompt-invalidReactomeID-confirm")
.on("click", "#prompt-invalidReactomeID-confirm", function (evt) {
$(self.el).modal("toggle");
appUtilities.mapByReactomeIDQueryView.render();
});

return this;
},
});

var PromptInvalidURIWarning = Backbone.View.extend({
initialize: function () {
var self = this;
Expand Down Expand Up @@ -4561,6 +4724,28 @@ var PromptInvalidWPIDWarning = Backbone.View.extend({
},
});

var PromptInvalidReactomeIDWarning = Backbone.View.extend({
initialize: function () {
var self = this;
self.template = _.template($("#prompt-invalidReactomeID-template").html());
},
render: function () {
var self = this;
self.template = _.template($("#prompt-invalidReactomeID-template").html());

$(self.el).html(self.template);
$(self.el).modal("show");

$(document)
.off("click", "#prompt-invalidReactomeID-confirm")
.on("click", "#prompt-invalidReactomeID-confirm", function (evt) {
$(self.el).modal("toggle");
});

return this;
},
});

var PromptInvalidFileView = Backbone.View.extend({
initialize: function () {
var self = this;
Expand Down Expand Up @@ -7225,6 +7410,7 @@ module.exports = {
CommonStreamQueryView: CommonStreamQueryView,
PathsByURIQueryView: PathsByURIQueryView,
MapByWPIDQueryView: MapByWPIDQueryView,
MapByReactomeIDQueryView: MapByReactomeIDQueryView,
PromptSaveView: PromptSaveView,
FileSaveView: FileSaveView,
SaveUserPreferencesView: SaveUserPreferencesView,
Expand All @@ -7245,8 +7431,10 @@ module.exports = {
AnnotationElementView: AnnotationElementView,
PromptInvalidURIView: PromptInvalidURIView,
PromptInvalidWPIDView: PromptInvalidWPIDView,
PromptInvalidReactomeIDView: PromptInvalidReactomeIDView,
PromptInvalidURIWarning: PromptInvalidURIWarning,
PromptInvalidWPIDWarning: PromptInvalidWPIDWarning,
PromptInvalidReactomeIDWarning: PromptInvalidReactomeIDWarning,
PromptInvalidURLWarning: PromptInvalidURLWarning,
PromptInvalidImageWarning: PromptInvalidImageWarning,
PromptInvalidEdgeWarning: PromptInvalidEdgeWarning,
Expand Down
77 changes: 77 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,14 @@
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" id="query-reactome" class="dropdown-toggle" data-toggle="dropdown">Reactome</a>
<ul class="dropdown-menu">
<li>
<a href="#" id="query-mapbyReactomeID">By Reactome ID...</a>
</li>
</ul>
</li>
</ul>
</li>

Expand Down Expand Up @@ -2387,6 +2395,10 @@
<!-- map by WPID query table will be shown here-->
</div>

<div id="query-mapbyReactomeID-table" tabindex="-1" class="modal fade" role="dialog">
<!-- map by Reactome query table will be shown here-->
</div>

<div id="prompt-save-table" tabindex="-1" class="modal fade" role="dialog">
<!-- sbgn properties table will be shown here-->
</div>
Expand Down Expand Up @@ -2445,6 +2457,10 @@
<div id="prompt-invalidWPID-table" tabindex="-1" class="modal fade" role="dialog">
<!-- map type change confirmation dialog will be shown here-->
</div>

<div id="prompt-invalidReactomeID-table" tabindex="-1" class="modal fade" role="dialog">
<!-- map type change confirmation dialog will be shown here-->
</div>

<div id="prompt-invalidFile-table" tabindex="-1" class="modal fade" role="dialog">
<!-- map type change confirmation dialog will be shown here-->
Expand Down Expand Up @@ -3752,6 +3768,36 @@ <h4 class="modal-title">Map By WPID</h4>
</div>
</script>

<script type="text/template" id="query-mapbyReactomeID-template">
<div class="modal-dialog sbgn-modal-dialog" style="width: 500px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Map By Reactome ID</h4>
</div>
<div class="modal-body">
<table class="table-condensed layout-table">
<tbody>
<tr>
<th colspan=3 style="padding-left: 0px;" align="left">
<span class="add-on layout-text"> Display map with the specified Reactome ID </span>
</th>
</tr>
<tr>
<td class="caption-style-text">Enter Reactome ID of a map</td>
<td style="padding: 10px;"><input id="query-mapbyReactomeID-ReactomeID" type="text" style="width: 300px;" placeholder="e.g. R-HSA-70171" value= <%= ReactomeID %> > </td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer" style="text-align: center">
<button id="save-query-mapbyReactomeID" class="btn btn-default" >OK</button>
<button id="cancel-query-mapbyReactomeID" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</script>

<script type="text/template" id="prompt-save-template">
<div class="modal-dialog sbgn-modal-dialog" style="width: 350px;">
<div class="modal-content">
Expand Down Expand Up @@ -4339,6 +4385,37 @@ <h4 class="modal-title">Error</h4>
</div>
</script>

<!-- Invalid Reactome ID error -->
<script type="text/template" id="prompt-invalidReactomeID-template">
<div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<table class="table-condensed layout-table dialog-table" style="margin: auto;">
<tbody>
<tr>
<th style="padding-left: 0px;" align="left">
<span class="add-on layout-text">Invalid Reactome ID!</span>
</th>
</tr>

<tr id="prompt-invalidReactomeID-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer" style="text-align: center">
<button id="prompt-invalidReactomeID-confirm" class="btn btn-default">OK</button>
</div>
</div>
</div>
</script>

<!-- Invalid file warning -->
<script type="text/template" id="prompt-invalidFile-template">
<div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
Expand Down

0 comments on commit 5d25c88

Please sign in to comment.