Skip to content

Commit

Permalink
new knetmaps 2.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@AjitPS
AjitPS committed Mar 6, 2020
1 parent be2cb00 commit a5fd5f6
Show file tree
Hide file tree
Showing 13 changed files with 1,953 additions and 2,504 deletions.
5 changes: 3 additions & 2 deletions config/url_mappings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ var url_mappings= {
{"cv": "TX", "weblink": "http://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=Info&id=", "cc_restriction": ""},
{"cv": "UNIPROTKB", "weblink": "http://www.uniprot.org/uniprot/", "cc_restriction": ""},
{"cv": "YeastCyc", "weblink": "https://yeast.biocyc.org/YEAST/NEW-IMAGE?type=NIL&object=", "cc_restriction": ""},
{"cv": "HumanCyc", "weblink": "https://humancyc.org/HUMAN/substring-search?type=NIL&object=", "cc_restriction": ""}
{"cv": "HumanCyc", "weblink": "https://humancyc.org/HUMAN/substring-search?type=NIL&object=", "cc_restriction": ""},
{"cv": "CHEMBL", "weblink": "https://www.ebi.ac.uk/chembl/compound_report_card/", "cc_restriction": ""}
]
};
};
19 changes: 10 additions & 9 deletions css/knet-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@
#knetmaps-menu input#relayoutNetwork.unhover { border: none; width:36px; height:36px; background:url("../img/relayoutNetwork.png") no-repeat; }
#knetmaps-menu input#openItemInfoBtn.unhover { border: none; width:36px; height:36px; background:url("../img/openItemInfoBtn.png") no-repeat; }
#knetmaps-menu input#resetNetwork.unhover { border: none; width:36px; height:36px; background:url("../img/resetNetwork.png") no-repeat; }
#knetmaps-menu input#savePNG.unhover { border: none; width:36px; height:36px; background:url("../img/savePNG.png") no-repeat; }
#knetmaps-menu input#saveJSON.unhover { border: none; width:36px; height:36px; background:url("../img/saveJSON.png") no-repeat; }
/* #knetmaps-menu input#savePNG.unhover { border: none; width:36px; height:36px; background:url("../img/savePNG.png") no-repeat; }
#knetmaps-menu input#saveJSON.unhover { border: none; width:36px; height:36px; background:url("../img/saveJSON.png") no-repeat; } */
#knetmaps-menu input#helpURL.unhover { border: none; width:36px; height:36px; background:url("../img/help.png") no-repeat; }
#knetmaps-menu input#openJSON.unhover { border: none; width:36px; height:36px; background:url("../img/openJSON.png") no-repeat; }
/* #knetmaps-menu input#openJSON.unhover { border: none; width:36px; height:36px; background:url("../img/openJSON.png") no-repeat; } */
input#btnCloseItemInfoPane { border: none; width:22px; height:22px; background:url("../img/close-icon.png") no-repeat; }

#knetmaps-menu input#maximizeOverlay.max.hover { border: none; width:36px; height:36px; background:url("../img/maximizeOverlay_hover.png") no-repeat; }
Expand All @@ -56,10 +56,10 @@ input#btnCloseItemInfoPane { border: none; width:22px; height:22px; background:u
#knetmaps-menu input#relayoutNetwork.hover { border: none; width:36px; height:36px; background:url("../img/relayoutNetwork_hover.png") no-repeat; }
#knetmaps-menu input#openItemInfoBtn.hover { border: none; width:36px; height:36px; background:url("../img/openItemInfoBtn_hover.png") no-repeat; }
#knetmaps-menu input#resetNetwork.hover { border: none; width:36px; height:36px; background:url("../img/resetNetwork_hover.png") no-repeat; }
#knetmaps-menu input#savePNG.hover { border: none; width:36px; height:36px; background:url("../img/savePNG_hover.png") no-repeat; }
#knetmaps-menu input#saveJSON.hover { border: none; width:36px; height:36px; background:url("../img/saveJSON_hover.png") no-repeat; }
/* #knetmaps-menu input#savePNG.hover { border: none; width:36px; height:36px; background:url("../img/savePNG_hover.png") no-repeat; }
#knetmaps-menu input#saveJSON.hover { border: none; width:36px; height:36px; background:url("../img/saveJSON_hover.png") no-repeat; } */
#knetmaps-menu input#helpURL.hover { border: none; width:36px; height:36px; background:url("../img/help_hover.png") no-repeat; }
#knetmaps-menu input#openJSON.hover { border: none; width:36px; height:36px; background:url("../img/openJSON_hover.png") no-repeat; }
/* #knetmaps-menu input#openJSON.hover { border: none; width:36px; height:36px; background:url("../img/openJSON_hover.png") no-repeat; } */
input.knetSynonym { border: none; width:22px; height:22px; background:url("../img/labelEye.png") }

input.knetCon_Biological_Process { border: none; width:22px; height:22px; background:url("../img/Biological_Process.png") }
Expand Down Expand Up @@ -270,10 +270,11 @@ input.knetCon_Trait_Ontology { border: none; width:22px; height:22px; background
.icon_caption {
display: block;/*float:below;*/
font-size: 11.5px;
}
/* Alter opacity of images */
}
/* Alter opacity of images */
.opacity_class {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

4 changes: 2 additions & 2 deletions gulp.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ module.exports = function () {
'./libs/jquery*.js',
'./libs/FileSaver.min.js',
'./libs/cytoscape.min.js',
'./libs/cytoscape-*.js',
'./libs/cytoscape-*.js'
],

// the development output
build: './dist/',
build: './dist/',
outputImages: './dist/img',
outputCss: './dist/css',
outputJs: './dist/js',
Expand Down
Binary file modified image/saveJSON.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/saveJSON_hover.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/saveJSON_hover_old.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/saveJSON_old.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
143 changes: 79 additions & 64 deletions javascript/knet-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,60 +73,27 @@ cy.boxSelectionEnabled(false); // to disable box selection & hence allow Panning
/* cy.nodes().forEach(function( ele ) {
var conType= ele.data('conceptType');
var imgName= 'Gene'; // default
if(conType === "Biological_Process") {
imgName= 'Biological_process';
}
else if(conType === "Cellular_Component") {
imgName= 'Cellular_component';
}
else if(conType === "Gene") {
imgName= 'Gene';
}
else if(conType === "Protein Domain") {
imgName= 'Protein_domain';
}
else if(conType === "Pathway") {
imgName= 'Pathway';
}
else if(conType === "Reaction") {
imgName= 'Reaction';
}
else if(conType === "Publication") {
imgName= 'Publication';
}
else if(conType === "Protein") {
imgName= 'Protein';
}
else if(conType === "Quantitative Trait Locus") {
imgName= 'QTL';
}
else if(conType === "Enzyme") {
imgName= 'Enzyme';
}
else if(conType === "Molecular_Function") {
imgName= 'Molecular_function';
}
else if((conType === "Enzyme_Classification") || (conType === "Enzyme Classification")) {
imgName= 'Enzyme_classification';
}
else if(conType === "Trait Ontology") {
imgName= 'Trait_ontology';
}
else if(conType === "Scaffold") {
imgName= 'Scaffold';
}
else if((conType === "Compound") || (conType === "SNP")) {
imgName= 'Compound';
}
else if(conType === "Phenotype") {
imgName= 'Phenotype';
}
if(conType === "Biological_Process") { imgName= 'Biological_process'; }
else if(conType === "Cellular_Component") { imgName= 'Cellular_component'; }
else if(conType === "Gene") { imgName= 'Gene'; }
else if(conType === "Protein Domain") { imgName= 'Protein_domain'; }
else if(conType === "Pathway") { imgName= 'Pathway'; }
else if(conType === "Reaction") { imgName= 'Reaction'; }
else if(conType === "Publication") { imgName= 'Publication'; }
else if(conType === "Protein") { imgName= 'Protein'; }
else if(conType === "Quantitative Trait Locus") { imgName= 'QTL'; }
else if(conType === "Enzyme") { imgName= 'Enzyme'; }
else if(conType === "Molecular_Function") { imgName= 'Molecular_function'; }
else if((conType === "Enzyme_Classification") || (conType === "Enzyme Classification")) { imgName= 'Enzyme_classification'; }
else if(conType === "Trait Ontology") { imgName= 'Trait_ontology'; }
else if(conType === "Scaffold") { imgName= 'Scaffold'; }
else if((conType === "Compound") || (conType === "SNP")) { imgName= 'Compound'; }
else if(conType === "Phenotype") { imgName= 'Phenotype'; }
var eleImage= 'image/'+ imgName +'.png';
// var eleImage= data_url +'image/'+ imgName +'.png';
// Add these properties to this element's JSON.
ele.data('nodeImage', eleImage);
// console.log("data.nodeImage "+ ele.data('nodeImage'));
// console.log("set data.nodeImage "+ ele.data('nodeImage'));
});
// Update the stylesheet for the Network Graph to show background images for Nodes.
Expand All @@ -136,8 +103,7 @@ cy.boxSelectionEnabled(false); // to disable box selection & hence allow Panning
}).update();
*/

/** Add a Qtip message to all the nodes & edges using QTip displaying their Concept Type & value when a
* node/ edge is clicked.
/** Add a Qtip message to all the nodes & edges using QTip displaying their Concept Type & value when a node/ edge is clicked.
* Note: Specify 'node' or 'edge' to bind an event to a specific type of element.
* e.g, cy.elements('node').qtip({ }); or cy.elements('edge').qtip({ }); */
cy.elements().qtip({
Expand All @@ -160,10 +126,7 @@ cy.elements().qtip({
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 12,
height: 6
}
tip: { width: 12, height: 6 }
}
});

Expand All @@ -185,15 +148,15 @@ cy.elements().qtip({
info= info +"<br/><b>To:</b> "+ cy.$('#'+toID).data('value') +" ("+ cy.$('#'+toID).data('conceptType').toLowerCase() +")";
}
}
catch(err) { info= "Selected element is neither a Concept nor a Relation"; }
catch(err) { info= "Selected element is neither a Concept nor a Relation"; }
console.log(info);
iteminfo.showItemInfo(thisElement);
});
// cxttap - normalised right click or 2-finger tap event.

/** Popup (context) menu: a circular Context Menu for each Node (concept) & Edge (relation) using the 'cxtmenu' jQuery plugin. */
var contextMenu= {
menuRadius: 75, // the radius of the circular menu in pixels
menuRadius: 80, // the radius of the circular menu in pixels

// Use selector: '*' to set this circular Context Menu on all the elements of the core.
/** Note: Specify selector: 'node' or 'edge' to restrict the context menu to a specific type of element. e.g,
Expand All @@ -206,7 +169,6 @@ cy.elements().qtip({
select: function() {
// Show Item Info Pane.
iteminfo.openItemInfoPane();

// Display Item Info.
iteminfo.showItemInfo(this);
}
Expand All @@ -231,11 +193,12 @@ cy.elements().qtip({
this.addClass('HideEle');
// Refresh network legend.
stats.updateKnetStats();
conceptLegend.populateConceptLegend();
conceptLegend.populateConceptLegend();
}
},

{

// disabled Hide by Type feature (Jan. 2020)
/* {
content: 'Hide by Type',
select: function() { // Hide all concepts (nodes) of the same type.
if(this.isNode()) {
Expand Down Expand Up @@ -266,10 +229,62 @@ cy.elements().qtip({
}
// Refresh network Stats.
stats.updateKnetStats();
conceptLegend.populateConceptLegend();
conceptLegend.populateConceptLegend();
}
}, */

{
// Turn the highlighter on or off, respectively.
content: 'Highlighter on/off',
select: function () {
if (this.isNode() && this.css('text-background-opacity') == '1') {
this.css({
'text-background-opacity': '0'
});
}
else if (this.isNode() && this.css('text-background-opacity') == '0') {
this.css({
'text-background-opacity': '1'
});
}
}
},

// {
// content: 'Hide by Type',
// select: function() { // Hide all concepts (nodes) of the same type.
// if(this.isNode()) {
// var thisConceptType= this.data('conceptType');
// // console.log("Hide Concept by Type: "+ thisConceptType);
// cy.nodes().forEach(function( ele ) {
// if(ele.data('conceptType') === thisConceptType) {
// //ele.hide();
// ele.removeClass('ShowEle');
// ele.addClass('HideEle');
// }
// });
// // Relayout the graph.
// //rerunLayout();
// }
// else if(this.isEdge()) { // Hide all relations (edges) of the same type.
// var thisRelationType= this.data('label');
// // console.log("Hide Relation (by Label type): "+ thisRelationType);
// cy.edges().forEach(function( ele ) {
// if(ele.data('label') === thisRelationType) {
// //ele.hide();
// ele.removeClass('ShowEle');
// ele.addClass('HideEle');
// }
// });
// // Relayout the graph.
// // rerunLayout();
// }
// // Refresh network Stats.
// stats.updateKnetStats();
// conceptLegend.populateConceptLegend();
// }
// },

{
content: 'Label on/ off by Type',
select: function() {
Expand Down Expand Up @@ -342,7 +357,7 @@ cy.cxtmenu(contextMenu); // set Context Menu for all the core elements.
$('#infoDialog').slideToggle(300);
});

}
};

return my;
};
4 changes: 2 additions & 2 deletions javascript/knet-generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ KNETMAPS.Generator = function() {

var my = function() {};

// initialize and generate the network from default global vars
// initialize and generate the network from default global vars
my.generateNetworkGraph=function(eles_jsons, metadata_json, eles_styles) {
//console.log("Dataset file path: "+ json_File);
graphJSON = eles_jsons; // set graphJSON to reloaded JSON.
Expand All @@ -37,7 +37,7 @@ KNETMAPS.Generator = function() {
my.generateNetworkGraphRaw=function(json_blob) {
//console.log("Dataset file path: "+ json_File);
eval(json_blob+'; my.initializeNetworkView(graphJSON, allGraphData); my.blurNodesWithHiddenNeighborhood(); stats.updateKnetStats(); legend.populateConceptLegend();');
}
};

// initialize the network
my.initializeNetworkView=function(networkJSON, metadataJSON, existing_styles) {
Expand Down
Loading

0 comments on commit a5fd5f6

Please sign in to comment.