Adding basic options like layout name and curve style for cytoscape graphs

This commit is contained in:
anuprulez
2017-02-28 00:12:59 +01:00
parent b18736d824
commit 69b9b57517
6 changed files with 76 additions and 17 deletions
@@ -47,18 +47,19 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1), __webpack_require__(2) ], __WEBPACK_AMD_DEFINE_RESULT__ = function( Utils, Cytoscape ) {
return Backbone.Model.extend({
initialize: function( options ) {
var chart = options.chart;
var dataset = options.dataset;
var chart = options.chart,
dataset = options.dataset,
settings = options.chart.settings;
Utils.get( {
url : dataset.download_url,
success : function( content ) {
try {
Cytoscape({
var cytoscape = Cytoscape({
container: document.getElementById( options.targets[ 0 ] ),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'grid'
name: settings.get( 'layout_name' )
},
style: [{
selector: 'node',
@@ -69,7 +70,7 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
{
selector: 'edge',
style: {
'curve-style': 'haystack',
'curve-style': settings.get( 'curve_style' ),
'haystack-radius': 0,
'width': 5,
'opacity': 0.5,
File diff suppressed because one or more lines are too long
@@ -819,14 +819,43 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function() {
return {
title : 'Cytoscape (Default)',
title : 'Cytoscape',
library : 'Cytoscape',
datatypes : [ 'json' ],
keywords : 'cytoscape graph nodes edges',
description : 'Basic Cytoscape viewer for connected graphs hosted at http://js.cytoscape.org.'
description : 'A viewer based on graph theory/ network library for analysis and visualisation hosted at http://js.cytoscape.org.',
settings : {
curve_style : {
label : 'Curve style',
help : 'Select a curving method used to separate two or more edges between two nodes.',
type : 'select',
display : 'radio',
value : 'haystack',
data : [ { label : 'Haystack', value : 'haystack' },
{ label : 'Bezier', value : 'bezier' },
{ label : 'Unbundled bezier', value : 'unbundled-bezier' },
{ label : 'Segments', value: 'segments' } ]
},
layout_name : {
label : 'Layout name',
help : 'Select a kind of position of nodes in graph.',
type : 'select',
display : 'radio',
value : 'haystack',
data : [ { label : 'Breadth First', value : 'breadthfirst' },
{ label : 'Circle', value : 'circle' },
{ label : 'Concentric', value : 'concentric' },
{ label : 'Cose', value : 'cose' },
{ label : 'Grid', value : 'grid' },
{ label : 'Null', value: 'null' },
{ label : 'Preset', value : 'preset' },
{ label : 'Random', value : 'random' } ]
}
}
}
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ },
/* 32 */
/***/ function(module, exports, __webpack_require__) {
File diff suppressed because one or more lines are too long
@@ -1,9 +1,37 @@
define( [], function() {
return {
title : 'Cytoscape (Default)',
title : 'Cytoscape',
library : 'Cytoscape',
datatypes : [ 'json' ],
keywords : 'cytoscape graph nodes edges',
description : 'Basic Cytoscape viewer for connected graphs hosted at http://js.cytoscape.org.'
description : 'A viewer based on graph theory/ network library for analysis and visualisation hosted at http://js.cytoscape.org.',
settings : {
curve_style : {
label : 'Curve style',
help : 'Select a curving method used to separate two or more edges between two nodes.',
type : 'select',
display : 'radio',
value : 'haystack',
data : [ { label : 'Haystack', value : 'haystack' },
{ label : 'Bezier', value : 'bezier' },
{ label : 'Unbundled bezier', value : 'unbundled-bezier' },
{ label : 'Segments', value: 'segments' } ]
},
layout_name : {
label : 'Layout name',
help : 'Select a kind of position of nodes in graph.',
type : 'select',
display : 'radio',
value : 'haystack',
data : [ { label : 'Breadth First', value : 'breadthfirst' },
{ label : 'Circle', value : 'circle' },
{ label : 'Concentric', value : 'concentric' },
{ label : 'Cose', value : 'cose' },
{ label : 'Grid', value : 'grid' },
{ label : 'Null', value: 'null' },
{ label : 'Preset', value : 'preset' },
{ label : 'Random', value : 'random' } ]
}
}
}
});
});
@@ -1,18 +1,19 @@
define( [ 'utilities/utils', 'plugins/cytoscape/cytoscape' ], function( Utils, Cytoscape ) {
return Backbone.Model.extend({
initialize: function( options ) {
var chart = options.chart;
var dataset = options.dataset;
var chart = options.chart,
dataset = options.dataset,
settings = options.chart.settings;
Utils.get( {
url : dataset.download_url,
success : function( content ) {
try {
Cytoscape({
var cytoscape = Cytoscape({
container: document.getElementById( options.targets[ 0 ] ),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'grid'
name: settings.get( 'layout_name' )
},
style: [{
selector: 'node',
@@ -23,7 +24,7 @@ define( [ 'utilities/utils', 'plugins/cytoscape/cytoscape' ], function( Utils, C
{
selector: 'edge',
style: {
'curve-style': 'haystack',
'curve-style': settings.get( 'curve_style' ),
'haystack-radius': 0,
'width': 5,
'opacity': 0.5,