opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding Kruskal algorithm for graphs and color choosing scheme for highlighted edges

Browse Source
This commit is contained in:
anuprulez
2017-03-19 14:50:18 +01:00
parent a2affcc618
commit c658ef3c7e
7 changed files with 136 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/charts/static/repository/build/cytoscape_viewer.js
+35 -6
View File
@@ -52,7 +52,16 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
settings = options.chart.settings,
data_content = null,
cytoscape = null,
self = this;
self = this,
rgb = [],
hex_color = "";
// Get hex color for the highlighted edges
rgb.push( parseInt( settings.get( 'choose_red' ) ) );
rgb.push( parseInt( settings.get( 'choose_green' ) ) );
rgb.push( parseInt( settings.get( 'choose_blue' ) ) );
hex_color = Utils.toHexColor( rgb );
Utils.get( {
url : dataset.download_url,
success : function( content ) {
@@ -96,9 +105,9 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
{
selector: '.searchpath',
style: {
'background-color': '#336699',
'line-color': '#336699',
'target-arrow-color': '#336699',
'background-color': hex_color,
'line-color': hex_color,
'target-arrow-color': hex_color,
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.75s'
}
@@ -106,6 +115,12 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
elements: data_content
});
// Highlight the minimum spanning tree found using Kruskal algorithm
if( settings.get( 'search_algorithm' ) === "kruskal" ) {
var kruskal = cytoscape.elements().kruskal();
kruskal.edges().addClass('searchpath');
}
// Register tap event on graph nodes
// Right now on tapping on any node, BFS starts from that node
cytoscape.$( 'node' ).on('tap', function( e ) {
@@ -113,7 +128,7 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
search_algorithm = settings.get( 'search_algorithm' );
self.run_search_algorithm(cytoscape, ele.id(), search_algorithm);
});
chart.state( 'ok', 'Chart drawn.' );
// Re-renders the graph view when window is resized
$( window ).resize( function() { cytoscape.layout(); } );
@@ -271,16 +286,30 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
return 'uid-' + top.__utils__uid__++;
};
/** Create Hex code from RGB color */
function toHexColor( rgb ) {
var red = rgb[0].toString(16),
green = rgb[1].toString(16),
blue = rgb[2].toString(16);
red = ( red.length == 1 ? "0" + red : red );
green = ( green.length == 1 ? "0" + green : green );
blue = ( blue.length == 1 ? "0" + blue : blue );
return "#" + red + green + blue;
};
return {
get : get,
merge : merge,
uid : uid,
request : request,
clone : clone,
isJSON : isJSON
isJSON : isJSON,
toHexColor : toHexColor
};
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
config/plugins/visualizations/charts/static/repository/build/cytoscape_viewer.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
config/plugins/visualizations/charts/static/repository/build/registry.js
+32 -1
View File
@@ -863,15 +863,46 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
},
search_algorithm : {
label : 'Graph search algorithm',
label : 'Graph algorithms',
help : 'Select a search algorithm.',
type : 'select',
display : 'radio',
value : '',
data : [ { label : 'Breadth First Search', value : 'bfs' },
{ label : 'Depth First Search', value : 'dfs' },
{ label : 'Minimum Spanning Tree (Kruskal)', value : 'kruskal' },
{ label : 'None', value : '' } ]
},
choose_red : {
name : 'choose_red',
label : 'Red',
help : 'Select red component for highlighted edges',
type : 'integer',
min : 0,
max : 255,
value : 51
},
choose_green : {
name : 'choose_green',
label : 'Green',
help : 'Select green component for highlighted edges',
type : 'integer',
min : 0,
max : 255,
value : 102
},
choose_blue : {
name : 'choose_blue',
label : 'Blue',
help : 'Select blue component for highlighted edges',
type : 'integer',
min : 0,
max : 255,
value : 153
},
min_zoom : {
name : 'min_zoom',
config/plugins/visualizations/charts/static/repository/build/registry.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
config/plugins/visualizations/charts/static/repository/utilities/utils.js
+15 -2
View File
@@ -112,12 +112,25 @@ define( [], function() {
return 'uid-' + top.__utils__uid__++;
};
/** Create Hex code from RGB color */
function toHexColor( rgb ) {
var red = rgb[0].toString(16),
green = rgb[1].toString(16),
blue = rgb[2].toString(16);
red = ( red.length == 1 ? "0" + red : red );
green = ( green.length == 1 ? "0" + green : green );
blue = ( blue.length == 1 ? "0" + blue : blue );
return "#" + red + green + blue;
};
return {
get : get,
merge : merge,
uid : uid,
request : request,
clone : clone,
isJSON : isJSON
isJSON : isJSON,
toHexColor : toHexColor
};
});
});
config/plugins/visualizations/charts/static/repository/visualizations/cytoscape/viewer/config.js
+32 -1
View File
@@ -43,15 +43,46 @@ define( [], function() {
},
search_algorithm : {
label : 'Graph search algorithm',
label : 'Graph algorithms',
help : 'Select a search algorithm.',
type : 'select',
display : 'radio',
value : '',
data : [ { label : 'Breadth First Search', value : 'bfs' },
{ label : 'Depth First Search', value : 'dfs' },
{ label : 'Minimum Spanning Tree (Kruskal)', value : 'kruskal' },
{ label : 'None', value : '' } ]
},
choose_red : {
name : 'choose_red',
label : 'Red',
help : 'Select red component for highlighted edges',
type : 'integer',
min : 0,
max : 255,
value : 51
},
choose_green : {
name : 'choose_green',
label : 'Green',
help : 'Select green component for highlighted edges',
type : 'integer',
min : 0,
max : 255,
value : 102
},
choose_blue : {
name : 'choose_blue',
label : 'Blue',
help : 'Select blue component for highlighted edges',
type : 'integer',
min : 0,
max : 255,
value : 153
},
min_zoom : {
name : 'min_zoom',
config/plugins/visualizations/charts/static/repository/visualizations/cytoscape/viewer/wrapper.js
+20 -5
View File
@@ -6,7 +6,16 @@ define( [ 'utilities/utils', 'utilities/sifjson', 'plugins/cytoscape/cytoscape'
settings = options.chart.settings,
data_content = null,
cytoscape = null,
self = this;
self = this,
rgb = [],
hex_color = "";
// Get hex color for the highlighted edges
rgb.push( parseInt( settings.get( 'choose_red' ) ) );
rgb.push( parseInt( settings.get( 'choose_green' ) ) );
rgb.push( parseInt( settings.get( 'choose_blue' ) ) );
hex_color = Utils.toHexColor( rgb );
Utils.get( {
url : dataset.download_url,
success : function( content ) {
@@ -50,9 +59,9 @@ define( [ 'utilities/utils', 'utilities/sifjson', 'plugins/cytoscape/cytoscape'
{
selector: '.searchpath',
style: {
'background-color': '#336699',
'line-color': '#336699',
'target-arrow-color': '#336699',
'background-color': hex_color,
'line-color': hex_color,
'target-arrow-color': hex_color,
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.75s'
}
@@ -60,6 +69,12 @@ define( [ 'utilities/utils', 'utilities/sifjson', 'plugins/cytoscape/cytoscape'
elements: data_content
});
// Highlight the minimum spanning tree found using Kruskal algorithm
if( settings.get( 'search_algorithm' ) === "kruskal" ) {
var kruskal = cytoscape.elements().kruskal();
kruskal.edges().addClass('searchpath');
}
// Register tap event on graph nodes
// Right now on tapping on any node, BFS starts from that node
cytoscape.$( 'node' ).on('tap', function( e ) {
@@ -67,7 +82,7 @@ define( [ 'utilities/utils', 'utilities/sifjson', 'plugins/cytoscape/cytoscape'
search_algorithm = settings.get( 'search_algorithm' );
self.run_search_algorithm(cytoscape, ele.id(), search_algorithm);
});
chart.state( 'ok', 'Chart drawn.' );
// Re-renders the graph view when window is resized
$( window ).resize( function() { cytoscape.layout(); } );