Skip to content

Commit

Permalink
Implementation of PD map to AF map conversion feature (#682)
Browse files Browse the repository at this point in the history 
* Fixed

* Update

* body-parser

* heroku upload problem fix

* added node_modules

* add engine

* add engine

* express

* Delete node_modules directory

* port

* Update server.js

* Update server.js

* process.env.port => process.env.PORT

* changed the post url

* AF map name specified

* Added map description to converted AF graph

* Description changed AF graph to AF map #680

* Description changed AF graph to AF map #680

* Possible fix to the window fit problem #680

* Added comments

* Assigned port 80

* Map description bug fixed #680

* Added spinner and temporarly set inferNestingOnLoad to true #680

* Modified the map string so that only the visible map will be converted. Error display messages mmodified  #680

* PR changes except Heroku files #682

* Resolved some additional styling issues. (not Heroku yet) #682

* Resolved requested changes including Heroku #682

* URL updated for public server #682

* Resolved the loading from url issue

* Create Procfile

* For Heroku update

* Deleted Heroku files

* Changed public server url #682

* Fixed hidden compartment issue and used setTimeout for fitting the map after conversion #680

* Heroku deployment

* Heroku dependicies deleted

* Heroku sbgnviz update

* Heroku upload dependicies deleted

* Color scheme added and inferNestingOnLoad value set to original value (Issue 8-11) #680

* Reduced the timeout and made smooth transaction while loading the map

* Fixed inferNestingOnLoad is not true while loading #680

* Deleted spinner which is not centered

* Heroku deployment

* Heroku deleted

* Deleted Procfile
  • Loading branch information
@acanalpay
acanalpay authored Jul 16, 2021
1 parent 70881a5 commit 6c501f0
Show file tree
Hide file tree
Showing 8 changed files with 258 additions and 27 deletions.
8 changes: 8 additions & 0 deletions app/js/app-cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,14 @@ module.exports = function (chiseInstance) {
},
coreAsWell: true // Whether core instance have this item on cxttap
},
{
id: 'ctx-menu-pd2af',
content: 'Convert PD map to AF map',
onClickFunction: function () {
$('#highlight-errors-of-pd2af').trigger('click');
},
coreAsWell: true // Whether core instance have this item on cxttap
},
{
id: 'ctx-menu-collapse-complexes',
content: 'Collapse Complexes',
Expand Down
127 changes: 118 additions & 9 deletions app/js/app-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = function() {
var dynamicResize = appUtilities.dynamicResize.bind(appUtilities);

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

function validateSBGNML(xml) {
$.ajax({
Expand Down Expand Up @@ -128,6 +128,8 @@ module.exports = function() {
promptConfirmationView = appUtilities.promptConfirmationView = new BackboneViews.PromptConfirmationView({el: '#prompt-confirmation-table'});
promptMapTypeView = appUtilities.promptMapTypeView = new BackboneViews.PromptMapTypeView({el: '#prompt-mapType-table'});
promptInvalidFileView = appUtilities.promptInvalidFileView = new BackboneViews.PromptInvalidFileView({el: '#prompt-invalidFile-table'});
promptInvalidTypeWarning = appUtilities.promptInvalidTypeWarning = new BackboneViews.PromptInvalidTypeWarning({el: '#prompt-errorInvalidType-table'});
promtErrorPD2AF = appUtilities.promtErrorPD2AF = new BackboneViews.PromtErrorPD2AF({el: '#prompt-errorPD2AF-table'});
promptFileConversionErrorView = appUtilities.promptFileConversionErrorView = new BackboneViews.PromptFileConversionErrorView({el: '#prompt-fileConversionError-table'});
reactionTemplateView = appUtilities.reactionTemplateView = new BackboneViews.ReactionTemplateView({el: '#sbgn-bricks-table'});
gridPropertiesView = appUtilities.gridPropertiesView = new BackboneViews.GridPropertiesView({el: '#grid-properties-table'});
Expand Down Expand Up @@ -234,9 +236,7 @@ module.exports = function() {
updatePalette(chiseInstance.elementUtilities.mapType)

}

cy.fit( cy.elements(":visible"), 20 );

});


Expand Down Expand Up @@ -602,16 +602,19 @@ module.exports = function() {

// unlock graph topolpgy in case it is locked
chiseInstance.elementUtilities.unlockGraphTopology();

// reset map name and description
// default map name should be a string that contains the network id
currentGeneralProperties.mapName = appUtilities.getDefaultMapName(networkId);
currentGeneralProperties.mapDescription = appUtilities.defaultGeneralProperties.mapDescription;

if(!currentGeneralProperties.mapPD2AFConverted) {// if the file don't have a specified map name from pd map to af map conversion
currentGeneralProperties.mapName = appUtilities.getDefaultMapName(networkId);
currentGeneralProperties.mapDescription = appUtilities.defaultGeneralProperties.mapDescription;
}
currentGeneralProperties.mapPD2AFConverted = false; // Map name loaded, when new map is loading to the canvas name should be change

// set recalculate layout on complexity management based on map size
if (cy.nodes().length > 1250){
currentGeneralProperties.recalculateLayoutOnComplexityManagement = false;
}
currentGeneralProperties.inferNestingOnLoad = currentGeneralProperties.inferNestingOrigin;

// get and set properties from file
var properties = chiseInstance.getMapProperties();
Expand Down Expand Up @@ -728,6 +731,7 @@ module.exports = function() {

// reset current general properties at the scratch pad of cy
appUtilities.setScratch(cy, 'currentGeneralProperties', currentGeneralProperties);
cy.fit( cy.elements(":visible"), 20 );
});

$("#PD-legend").click(function (e) {
Expand Down Expand Up @@ -966,7 +970,114 @@ module.exports = function() {
chiseInstance.highlightProcesses(cy.nodes(':selected'));
});

// PD map to AF map conversion
$("#highlight-errors-of-pd2af").click(function (e) {

var chiseInstance = appUtilities.getActiveChiseInstance();
var chiseSpinnerInstance = appUtilities.getActiveChiseInstance();
var filename = document.getElementById('file-name').innerHTML;
var fExt = 'sbgn';
filename = filename.substring(0, filename.lastIndexOf('.')).concat(".").concat(fExt);

// Get the map from the canvas

var cy = chiseInstance.getCy();
var nodes = cy.nodes().filter( function( node ) {
return node.visible();
} );

var edges = cy.edges().filter( function( edge ) {
return edge.visible();
} );

var renderInfo = appUtilities.getAllStyles(cy, nodes, edges);
var properties = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties');

var file = chiseInstance.getSbgnvizInstance().convertSbgn(filename, "plain", renderInfo, properties, nodes, edges, true);
if(chiseInstance.getMapType() != 'PD'){
promptInvalidTypeWarning.render();
return;
}

if(nodes.length == 0 || edges.length == 0){
promtErrorPD2AF.render("No visible map found!");
return;
}
var currentGeneralProperties = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties');
var inferNestingOrigin = currentGeneralProperties.inferNestingOnLoad;
var mapColorScheme = currentGeneralProperties.mapColorScheme;
var mapColorSchemeStyle = currentGeneralProperties.mapColorSchemeStyle;
chiseSpinnerInstance.startSpinner("layout-spinner");

// pd2af returns filename and file url
$.ajax({
// After deploying Bridge Server (pd2af-webservice) write the bridge server's URL but leave the /convert
// url: "https://pd2afwebservice.herokuapp.com/convert",
url: "http://139.179.21.94:4000/convert", //public server url
type: "POST",
ContentType: 'multipart/form-data; boundary=----WebKitFormBoundaryQzlzmdgbQfbawnvk',
data: {
'file': file,
'filename': filename
},
success: function (data) {
// If response returns error display the message
if(data.name==='Error' || data.error || data.name==='error'){
console.log(data);
chiseSpinnerInstance.endSpinner("layout-spinner");
promtErrorPD2AF.render(data.message);
}else{
chiseSpinnerInstance.endSpinner("layout-spinner");
filename = data.filename;

// Create new network
var current = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties');
var networkName = current.mapName;
var networkDescription = current.mapDescription;
// If networkDescription itself is used to create the description text, original map description would also be changed
if(networkDescription ){
var st = JSON.stringify(networkDescription[0]);
st = st.slice(1); // For removing " at the beginning
st = "AF map of " + st.charAt(0).toLowerCase() + st.slice(1);
st = st.slice(0,-1); // For removing " at the end
}
networkName += " AF";
var newNetwork = appUtilities.createNewNetwork(networkName, st); // Create new network (new Newt tab)
var currentGeneralProperties = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties');
currentGeneralProperties.mapPD2AFConverted = true; // Set it to true so load will not overwrite the map name and description
currentGeneralProperties.inferNestingOrigin = currentGeneralProperties.inferNestingOnLoad;
currentGeneralProperties.inferNestingOnLoad = true;

currentGeneralProperties.mapColorSchemeStyle = mapColorSchemeStyle;
currentGeneralProperties.mapColorScheme = mapColorScheme;
appUtilities.setScratch(appUtilities.getActiveCy(), 'currentGeneralProperties', currentGeneralProperties);

chiseInstance = appUtilities.getActiveChiseInstance();
var fileExtension = filename.split('.');
var fileToLoad = new File([data.body], filename, {
type: 'text/sbgn',
lastModified: Date.now()
});

setTimeout(function(){
chiseInstance.loadSBGNMLFile(fileToLoad, ()=>{}, ()=>{}, data);
}, 1000);
appUtilities.setScratch(appUtilities.getActiveCy(), 'currentGeneralProperties', currentGeneralProperties);
appUtilities.applyMapColorScheme(currentGeneralProperties.mapColorScheme, currentGeneralProperties.mapColorSchemeStyle, appUtilities.colorSchemeInspectorView);
}
},
error: function (data) {
console.log(data);
chiseSpinnerInstance.endSpinner("layout-spinner");
if(data.status == 0)
promtErrorPD2AF.render("Server might be offline!");

else
promtErrorPD2AF.render(data.message);
}
});
});

$("#highlight-errors-of-validation, #highlight-errors-of-validation-icon").click(function (e) {
modeHandler.enableReadMode();
// use active chise instance
Expand Down Expand Up @@ -1202,7 +1313,6 @@ module.exports = function() {
});

$("#perform-layout, #perform-layout-icon").click(function (e) {

// use active chise instance
var chiseInstance = appUtilities.getActiveChiseInstance();

Expand All @@ -1223,7 +1333,6 @@ module.exports = function() {
var preferences = {
animate: (cy.nodes().length > 3000 || cy.edges().length > 3000) ? false : currentGeneralProperties.animateOnDrawingChanges
};

layoutPropertiesView.applyLayout(preferences);
});

Expand Down
17 changes: 10 additions & 7 deletions app/js/app-utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,16 +339,19 @@ appUtilities.adjustVisibilityOfNetworkTabs = function () {
};

// creates a new network and returns the new chise.js instance that is created for this network
appUtilities.createNewNetwork = function () {
appUtilities.createNewNetwork = function (networkName, networkDescription) {

// id of the div panel associated with the new network
var networkPanelId = appUtilities.getNetworkPanelId(appUtilities.nextNetworkId);

// id of the tab for the new network
var networkTabId = appUtilities.getNetworkTabId(appUtilities.nextNetworkId);

// use the default map name for the given next network id
var mapName = appUtilities.getDefaultMapName(appUtilities.nextNetworkId);

var mapName;
if(networkName)
mapName = networkName;
else
mapName = appUtilities.getDefaultMapName(appUtilities.nextNetworkId);

// create physical html components for the new network
// use map name as the tab description
Expand All @@ -364,7 +367,8 @@ appUtilities.createNewNetwork = function () {

// update the map name with the default map name specific for network id
currentGeneralProperties.mapName = mapName;

if(networkDescription)
currentGeneralProperties.mapDescription = networkDescription;
// Create a new chise.js instance
var newInst = chise({
networkContainerSelector: networkPanelSelector,
Expand Down Expand Up @@ -427,7 +431,7 @@ appUtilities.createNewNetwork = function () {
appUtilities.setScratch(newInst.getCy(), 'currentLayoutProperties', currentLayoutProperties);
appUtilities.setScratch(newInst.getCy(), 'currentGridProperties', currentGridProperties);
appUtilities.setScratch(newInst.getCy(), 'currentGeneralProperties', currentGeneralProperties);

// init the current file name for the map
appUtilities.setScratch(newInst.getCy(), 'currentFileName', 'new_file.nwt');

Expand Down Expand Up @@ -464,7 +468,6 @@ appUtilities.createNewNetwork = function () {

// adjust the visibility of network tabs
appUtilities.adjustVisibilityOfNetworkTabs();

// return the new instance
return newInst;
};
Expand Down
42 changes: 42 additions & 0 deletions app/js/backbone-views.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3303,7 +3303,47 @@ var PromptInvalidFileView = Backbone.View.extend({
return this;
}
});
var PromptInvalidTypeWarning = Backbone.View.extend({
initialize: function () {
var self = this;
self.template = _.template($("#prompt-errorInvalidType-template").html());
},
render: function () {
var self = this;
self.template = _.template($("#prompt-errorInvalidType-template").html());

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

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

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

var param = {};
param.message = message;
self.template = self.template(param);

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

$(document).off("click", "#prompt-errorPD2AF-confirm").on("click", "#prompt-errorPD2AF-confirm", function (evt) {
$(self.el).modal('toggle');
});
return this;
}
});
var PromptFileConversionErrorView = Backbone.View.extend({
initialize: function () {
var self = this;
Expand Down Expand Up @@ -5241,6 +5281,8 @@ module.exports = {
PromptConfirmationView: PromptConfirmationView,
PromptMapTypeView: PromptMapTypeView,
PromptInvalidFileView: PromptInvalidFileView,
PromptInvalidTypeWarning: PromptInvalidTypeWarning,
PromtErrorPD2AF: PromtErrorPD2AF,
PromptFileConversionErrorView: PromptFileConversionErrorView,
ReactionTemplateView: ReactionTemplateView,
GridPropertiesView: GridPropertiesView,
Expand Down
Loading

0 comments on commit 6c501f0

Please sign in to comment.