Commit bd981be3 authored by maxchaza's avatar maxchaza
Browse files

Property documentation

parent 8097c1a8
......@@ -2,16 +2,15 @@
* @author MC
* Links drawing
*
*
* @property {Element} link
* @property {Element} visibleLinks
*
* @uses metExploreD3.GraphUtil
* @uses metExploreD3.GraphStyleEdition
* @uses metExploreD3.GraphCaption
*/
metExploreD3.GraphLink = {
/**
* @property {Element} link
* @property {Element} visibleLinks
*/
link: "",
visibleLinks: "",
......
/**
* @class metExploreD3.GraphNetwork
*
* @author MC
* To manage the metabolic network
*
......@@ -8,14 +9,6 @@
* Refresh viz & Tick of animation
* Node & Link operations (maybe to pass in GraphNode and GraphLink)
*
* @property {Function} [task=""]
* @property {Boolean} [brushing=false]
* @property {Function} [brushEvnt=undefined]
* @property {Function} [taskZoom=""]
* @property {Boolean} [first=true]
* @property {Boolean} [focus=false]
* @property {Boolean} [scrollable=false]
*
* @uses metExploreD3.GraphLink
* @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphStyleEdition
......@@ -27,6 +20,15 @@
metExploreD3.GraphNetwork = {
/**
* @property {Function} [task=""]
* @property {Boolean} [brushing=false]
* @property {Function} [brushEvnt=undefined]
* @property {Function} [taskZoom=""]
* @property {Boolean} [first=true]
* @property {Boolean} [focus=false]
* @property {Boolean} [scrollable=false]
*/
task:"",
brushing:false,
brushEvnt:undefined,
......
......@@ -2,17 +2,6 @@
* @author MC
* Nodes drawing
*
*
* @property {Element} [node=""]
* @property {Element} [updatedNodes=""]
* @property {String} [panelParent=""]
* @property {String} [activePanel=""]
* @property {Function} [taskClick=""]
* @property {Number} [charKey=""]
* @property {Number} [ctrlKey=""]
* @property {Function} [groupFill=""]
* @property {Boolean} [dblClickable=false]
*
* @uses metExploreD3.GraphLink
* @uses metExploreD3.GraphPanel
* @uses metExploreD3.GraphNetwork
......@@ -21,7 +10,17 @@
*/
metExploreD3.GraphNode = {
/**
* @property {Element} [node=""]
* @property {Element} [updatedNodes=""]
* @property {String} [panelParent=""]
* @property {String} [activePanel=""]
* @property {Function} [taskClick=""]
* @property {Number} [charKey=""]
* @property {Number} [ctrlKey=""]
* @property {Function} [groupFill=""]
* @property {Boolean} [dblClickable=false]
*/
node: "",
_MyThisGraphNode: "",
updatedNodes: "",
......
/**
* @class metExploreD3.GraphUtils
* Basic functions
*
* Save, exports, imports
* Color converters
* Web Services facilities
*
* @author MC
* @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphNetwork
* @uses metExploreD3.GraphStyleEdition
*/
metExploreD3.GraphUtils = {
/*****************************************************
* Decode external JSONs
* @param {String} json Active string from imports
*/
decodeJSON : function(json){
try {
var jsonParsed = Ext.decode(json);
}
catch (ex) {
metExploreD3.displayWarning('Invalid JSON String', 'Unable to parse the JSON');
}
return jsonParsed;
/*****************************************************
* Decode external JSONs
* @param {String} json Active string from imports
*/
decodeJSON : function(json){
try {
var jsonParsed = Ext.decode(json);
}
catch (ex) {
metExploreD3.displayWarning('Invalid JSON String', 'Unable to parse the JSON');
}
return jsonParsed;
},
/*****************************************************
* Function to facilitate launching of MetExplore Web Service
* @param {String} url WebService to call https://vm-metexplore-prod.toulouse.inra.fr/metexplore-webservice-documentation/
* @param {Function} func Callback function
*
* Example :
* @example
* metExploreViz.GraphUtils.launchWebService(
* "http://metexplore.toulouse.inra.fr:8080/metExploreWebService/mapping/graphresult/38285/filteredbypathway?pathwayidlist=(123757,123787)",
* function(myJsonString){
* })
*
*/
/*****************************************************
* Function to facilitate launching of MetExplore Web Service
* @param {String} url WebService to call https://vm-metexplore-prod.toulouse.inra.fr/metexplore-webservice-documentation/
* @param {Function} func Callback function
*
* Example :
* @example
* metExploreViz.GraphUtils.launchWebService(
* "http://metexplore.toulouse.inra.fr:8080/metExploreWebService/mapping/graphresult/38285/filteredbypathway?pathwayidlist=(123757,123787)",
* function(myJsonString){
* })
*
*/
launchWebService : function(url, func){
//var mapJSON = '{"name": "mapping_D-Galactose", "mappings":[{"name": "conditionName1", "data": [{"node" : "D-Galactose"}, {"node" : "D-galactose"}] }]}';
$.ajax({
......@@ -42,521 +50,521 @@ metExploreD3.GraphUtils = {
success: function (data) {
func(data);
},
error: function (data) {
alert("Bad");
error: function (data) {
alert("Bad");
}
});
});
},
/*****************************************************
* Function to facilitate parsing of MetExplore Web Service mapping results
* @param {String} myJsonMapping JSON string result of MetExplore Web Service
* @return {String} mapJSON String that you can map programmatically in MetExploreViz
*/
parseWebServiceMapping : function(myJsonMapping){
//var mapJSON = '{"name": "mapping_D-Galactose", "mappings":[{"name": "conditionName1", "data": [{"node" : "D-Galactose"}, {"node" : "D-galactose"}] }]}';
var mappingJSON = Ext.decode(myJsonMapping);
var conditions = mappingJSON.mappingdata[0].mappings;
conditions.forEach(function(condition){
var mappingDatas = condition.data;
var i = 0;
var valueIsSet = false;
while (i < mappingDatas.length && !valueIsSet) {
if(mappingDatas.value != undefined)
valueIsSet=true;
i++;
}
if(!valueIsSet)
condition.name="undefined"
});
var mapJSON = JSON.stringify(mappingJSON.mappingdata[0]);
//Load mapping
return mapJSON;
},
/*****************************************************
* Function to pass in array filter to allow unicity of array elements
* If the current iterator object hasn't the same index that the first similar element find with find index return false and remove it through filter
* @param {Object} value Current value
* @param {Number} index Current index
* @param {Array} self The array
*
* Example :
* @example
* var arrayOfNodes = [1,1,2,3,5,7,7,10];
* console.log(arrayOfNodes.filter(metExploreD3.GraphUtils.onlyUnique));
* //[1,2,3,5,7,10];
*
*/
onlyUnique : function(value, index, self) {
return self
.findIndex(
function(x){return x===value;}
) === index;
},
/*****************************************************
* Read input file
* @param {Element} input DOM element of input file
* @param {Function} func Callback function
/*****************************************************
* Function to facilitate parsing of MetExplore Web Service mapping results
* @param {String} myJsonMapping JSON string result of MetExplore Web Service
* @return {String} mapJSON String that you can map programmatically in MetExploreViz
*/
parseWebServiceMapping : function(myJsonMapping){
//var mapJSON = '{"name": "mapping_D-Galactose", "mappings":[{"name": "conditionName1", "data": [{"node" : "D-Galactose"}, {"node" : "D-galactose"}] }]}';
var mappingJSON = Ext.decode(myJsonMapping);
var conditions = mappingJSON.mappingdata[0].mappings;
conditions.forEach(function(condition){
var mappingDatas = condition.data;
var i = 0;
var valueIsSet = false;
while (i < mappingDatas.length && !valueIsSet) {
if(mappingDatas.value != undefined)
valueIsSet=true;
i++;
}
if(!valueIsSet)
condition.name="undefined"
});
var mapJSON = JSON.stringify(mappingJSON.mappingdata[0]);
//Load mapping
return mapJSON;
},
/*****************************************************
* Function to pass in array filter to allow unicity of array elements
* If the current iterator object hasn't the same index that the first similar element find with find index return false and remove it through filter
* @param {Object} value Current value
* @param {Number} index Current index
* @param {Array} self The array
*
* Example :
* @example
* var arrayOfNodes = [1,1,2,3,5,7,7,10];
* console.log(arrayOfNodes.filter(metExploreD3.GraphUtils.onlyUnique));
* //[1,2,3,5,7,10];
*
*/
onlyUnique : function(value, index, self) {
return self
.findIndex(
function(x){return x===value;}
) === index;
},
/*****************************************************
* Read input file
* @param {Element} input DOM element of input file
* @param {Function} func Callback function
*/
handleFileSelect : function(input, func){
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
if (!input) {
alert("couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else {
file = input.files[0];
var reader = new FileReader();
reader.onload = function(){
func(reader.result, file.name);
};
reader.readAsText(file);
}
},
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
if (!input) {
alert("couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else {
file = input.files[0];
var reader = new FileReader();
reader.onload = function(){
func(reader.result, file.name);
};
reader.readAsText(file);
}
},
/*******************************************
* Convert colorName in hex
* @param {String} color Classic color name
* @return {String}
* @return {String}
*/
colorNameToHex : function(color) {
var colors = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
"beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
"cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
"darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
"darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
"darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
"firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
"gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
"honeydew":"#f0fff0","hotpink":"#ff69b4",
"indianred ":"#cd5c5c","indigo":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
"lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
"lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
"lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
"magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
"mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
"navajowhite":"#ffdead","navy":"#000080",
"oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
"palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
"red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
"saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
"tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
"violet":"#ee82ee",
"wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
"yellow":"#ffff00","yellowgreen":"#9acd32"};
if (typeof colors[color.toLowerCase()] != 'undefined')
return colors[color.toLowerCase()];
return false;
},
colorNameToHex : function(color) {
var colors = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
"beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
"cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
"darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
"darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
"darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
"firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
"gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
"honeydew":"#f0fff0","hotpink":"#ff69b4",
"indianred ":"#cd5c5c","indigo":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
"lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
"lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
"lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
"magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
"mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
"navajowhite":"#ffdead","navy":"#000080",
"oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
"palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
"red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
"saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
"tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
"violet":"#ee82ee",
"wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
"yellow":"#ffff00","yellowgreen":"#9acd32"};
if (typeof colors[color.toLowerCase()] != 'undefined')
return colors[color.toLowerCase()];
return false;
},
/*******************************************
* Convert rgb in hexa
* @param {Number} r : Red
* @param {Number} r : Red
* @param {Number} g : green
* @param {Number} b : Bleu
* @return {String}
*/
RGB2Color : function(r,g,b){
return '#' + metExploreD3.GraphUtils.byte2Hex(r) + metExploreD3.GraphUtils.byte2Hex(g) + metExploreD3.GraphUtils.byte2Hex(b);
* @return {String}
*/
RGB2Color : function(r,g,b){
return '#' + metExploreD3.GraphUtils.byte2Hex(r) + metExploreD3.GraphUtils.byte2Hex(g) + metExploreD3.GraphUtils.byte2Hex(b);
},
/*******************************************
* Choose text color in function of contrast with background
* @param {String} backgroundColor Background color
* @return {String} The color assigned to text
*/
RGBString2Color : function(backgroundColor){
if(backgroundColor!=undefined){
var color;
if(backgroundColor.slice(0,3) == "rgb"){
backgroundColor = backgroundColor.replace("rgb","");
backgroundColor = backgroundColor.replace("(","");
backgroundColor = backgroundColor.replace(")","");
rgb = backgroundColor.split(",");
var red = rgb[0];
var green = rgb[1];
var blue = rgb[2];
return metExploreD3.GraphUtils.RGB2Color(red, green, blue)
}
if(backgroundColor.slice(0,1) == "#")
return backgroundColor;
}
* @return {String} The color assigned to text
*/
RGBString2Color : function(backgroundColor){
if(backgroundColor!=undefined){
var color;
if(backgroundColor.slice(0,3) == "rgb"){
backgroundColor = backgroundColor.replace("rgb","");
backgroundColor = backgroundColor.replace("(","");
backgroundColor = backgroundColor.replace(")","");
rgb = backgroundColor.split(",");
var red = rgb[0];
var green = rgb[1];
var blue = rgb[2];
return metExploreD3.GraphUtils.RGB2Color(red, green, blue)
}
if(backgroundColor.slice(0,1) == "#")
return backgroundColor;
}
},
/*******************************************
* Choose text color in function of contrast with background
* @param {} backgroundColor : Color of background
* @return {String}
* @private
*/
chooseTextColor : function(backgroundColor){
if(backgroundColor!=undefined){
var color;
if(backgroundColor.slice(0,1) == "#"){
var rgb = metExploreD3.GraphUtils.hexToRGB(backgroundColor);
var red = rgb.r;
var green = rgb.g;
var blue = rgb.b;
if ((red*0.299 + green*0.687 + blue*0.114) > 186)
color = "#000000";
else
color = "white";
}
else
{
if(backgroundColor.slice(0,3) == "rgb"){
backgroundColor = backgroundColor.replace("rgb","");
backgroundColor = backgroundColor.replace("(","");
backgroundColor = backgroundColor.replace(")","");
rgb = backgroundColor.split(",");
var red = rgb[0];
var green = rgb[1];
var blue = rgb[2];
if ((red*0.299 + green*0.687 + blue*0.114) > 186)
color = "#000000";
else
color = "white";
}
else
color = "#000000";
}
return color;
}
else
return "#000000";
* @return {String}
* @private
*/
chooseTextColor : function(backgroundColor){
if(backgroundColor!=undefined){
var color;
if(backgroundColor.slice(0,1) == "#"){
var rgb = metExploreD3.GraphUtils.hexToRGB(backgroundColor);
var red = rgb.r;
var green = rgb.g;
var blue = rgb.b;
if ((red*0.299 + green*0.687 + blue*0.114) > 186)
color = "#000000";
else
color = "white";
}
else
{
if(backgroundColor.slice(0,3) == "rgb"){
backgroundColor = backgroundColor.replace("rgb","");
backgroundColor = backgroundColor.replace("(","");
backgroundColor = backgroundColor.replace(")","");
rgb = backgroundColor.split(",");
var red = rgb[0];
var green = rgb[1];
var blue = rgb[2];
if ((red*0.299 + green*0.687 + blue*0.114) > 186)
color = "#000000";
else
color = "white";
}
else
color = "#000000";
}
return color;
}
else
return "#000000";
},
/*******************************************
* Convert byte in hexa
* @param {String} n : Color in byte
* @return {String}
* @return {String}
*/
byte2Hex : function(n){
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
},
/*******************************************
* Convert a hexidecimal color string to 0..255 R,G,B
* @param {String} hex Color in hex
* @return {String}
*/
hexToRGB : function(hex){
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")