Skip to content

Commit

Permalink
Fixed bug with edge shapes
Browse files Browse the repository at this point in the history 
Added additional layout possibilities
  • Loading branch information
@cannin
cannin committed Nov 22, 2014
1 parent 5bb4512 commit 5e22fae
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 129 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.Rproj.user
.Rhistory
.RData
126 changes: 67 additions & 59 deletions cytoscapeJsR_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,15 @@
<html>
<head>
<meta name='description' content='[An example of getting started with Cytoscape.js]' />

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cola.v3.min.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js'></script>

<meta charset='utf-8' />
<title>Cytoscape.js initialisation</title><style>
<title>Cytoscape.js in R Example</title><style>
#cy {
height: 100%;
width: 100%;
Expand All @@ -17,61 +22,64 @@
}
</style>
<script>
$(function(){ // on dom ready

var cy = cytoscape({
container: $('#cy')[0],

style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'shape': 'data(shape)',
'text-outline-color': 'data(color)',
'background-color': 'data(color)'
})
.selector('edge')
.css({
'line-color': 'data(color)',
'source-arrow-color': 'data(color)',
'target-arrow-color': 'data(color)',
'source-arrow-shape': 'data(sourceShape)',
'target-arrow-shape': 'data(targetShape)'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),

elements: {
nodes: [{ data: { id:'Jerry', name:'Jerry', color:'#00FF00', href:'http://www.google.com/search?q=Seinfeld%20Jerry', shape:'ellipse'} }, { data: { id:'Elaine', name:'Elaine', color:'#FF0000', href:'http://www.google.com/search?q=Seinfeld%20Elaine', shape:'ellipse'} }, { data: { id:'Kramer', name:'Kramer', color:'#00FF00', href:'http://www.google.com/search?q=Seinfeld%20Kramer', shape:'ellipse'} }, { data: { id:'George', name:'George', color:'#00FF00', href:'http://www.google.com/search?q=Seinfeld%20George', shape:'ellipse'} }],
edges: [{ data: { source:'Jerry', target:'Elaine', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Jerry', target:'Kramer', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Jerry', target:'George', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Elaine', target:'Jerry', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Elaine', target:'Kramer', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Kramer', target:'Jerry', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Kramer', target:'Elaine', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'Kramer', target:'George', color:'#888888', sourceShape:'none', targetShape:'triangle'} }, { data: { source:'George', target:'Jerry', color:'#888888', sourceShape:'none', targetShape:'triangle'} }]
},

layout: {
name: 'cose',
padding: 10
}
});

cy.on('tap', 'node', function(){
if(this.data('href').length > 0) {
window.open(this.data('href'));
}

//console.log(this.data('href'));
});

}); // on dom ready
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'shape': 'data(shape)',
'text-outline-color': 'data(color)',
'background-color': 'data(color)'
})
.selector('edge')
.css({
'line-color': 'data(color)',
'source-arrow-color': 'data(color)',
'target-arrow-color': 'data(color)',
'source-arrow-shape': 'data(edgeSourceShape)',
'target-arrow-shape': 'data(edgeTargetShape)'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),

elements: {
nodes: [{ data: { id:'Jerry', name:'Jerry', color:'#888888', shape:'ellipse', href:''} }, { data: { id:'Elaine', name:'Elaine', color:'#888888', shape:'ellipse', href:''} }, { data: { id:'Kramer', name:'Kramer', color:'#888888', shape:'ellipse', href:''} }, { data: { id:'George', name:'George', color:'#888888', shape:'ellipse', href:''} }],
edges: [{ data: { source:'Jerry', target:'Elaine', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Jerry', target:'Kramer', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Jerry', target:'George', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Elaine', target:'Jerry', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Elaine', target:'Kramer', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Kramer', target:'Jerry', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Kramer', target:'Elaine', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'Kramer', target:'George', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }, { data: { source:'George', target:'Jerry', color:'#888888', edgeSourceShape:'none', edgeTargetShape:'triangle'} }]
},

layout: {
name: 'cola',
padding: 10
},

ready: function() {
window.cy = this;

//Injected options


cy.on('tap', 'node', function(){
if(this.data('href').length > 0) {
window.open(this.data('href'));
}

//console.log(this.data('href'));
});
}
});
}); // on dom ready
</script></head><body><div id='cy'></div></body></html>
139 changes: 71 additions & 68 deletions cytoscapeJsSimpleNetwork.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,12 @@ createCytoscapeNetwork <- function(nodeData, edgeData,
#'
#' network <- createCytoscapeNetwork(nodeData, edgeData)
#'
#' output <- cytoscapeJsSimpleNetwork(network$nodes, network$edges)
#' output <- cytoscapeJsSimpleNetwork(network$nodes, network$edges, standAlone=TRUE)
#' fileConn <- file("cytoscapeJsR_example.html")
#' writeLines(output, fileConn)
#' close(fileConn)
cytoscapeJsSimpleNetwork <- function(nodeEntries, edgeEntries,
standAlone=FALSE, layout="cose",
standAlone=FALSE, layout="cola",
height=600, width=600, injectCode="") {
# Create webpage
PageHeader <- "
Expand All @@ -155,6 +155,9 @@ cytoscapeJsSimpleNetwork <- function(nodeEntries, edgeEntries,
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cola.v3.min.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js'></script>
<script src='http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/dagre.js'></script>
<meta charset='utf-8' />
<title>Cytoscape.js in R Example</title>"
Expand Down Expand Up @@ -185,72 +188,72 @@ cytoscapeJsSimpleNetwork <- function(nodeEntries, edgeEntries,
# Main script for creating the graph
MainScript <- paste0("
<script>
$(function(){ // on dom ready
var cy = cytoscape({
container: $('#cy')[0],
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'shape': 'data(shape)',
'text-outline-color': 'data(color)',
'background-color': 'data(color)'
})
.selector('edge')
.css({
'line-color': 'data(color)',
'source-arrow-color': 'data(color)',
'target-arrow-color': 'data(color)',
'source-arrow-shape': 'data(sourceShape)',
'target-arrow-shape': 'data(targetShape)'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [",
nodeEntries,
"],
edges: [",
edgeEntries,
"]
},
layout: {
name: '", layout, "',
padding: 10
}
});
//Injected options
",
injectCode
, "
cy.on('tap', 'node', function(){
if(this.data('href').length > 0) {
window.open(this.data('href'));
}
//console.log(this.data('href'));
});
}); // on dom ready
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'shape': 'data(shape)',
'text-outline-color': 'data(color)',
'background-color': 'data(color)'
})
.selector('edge')
.css({
'line-color': 'data(color)',
'source-arrow-color': 'data(color)',
'target-arrow-color': 'data(color)',
'source-arrow-shape': 'data(edgeSourceShape)',
'target-arrow-shape': 'data(edgeTargetShape)'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [",
nodeEntries,
"],
edges: [",
edgeEntries,
"]
},
layout: {
name: '", layout, "',
padding: 10
},
ready: function() {
window.cy = this;
//Injected options
",
injectCode
, "
cy.on('tap', 'node', function(){
if(this.data('href').length > 0) {
window.open(this.data('href'));
}
//console.log(this.data('href'));
});
}
});
}); // on dom ready
</script>")

PageBody <- "</head><body><div id='cy'></div>"
Expand Down
7 changes: 5 additions & 2 deletions ui.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ library(shiny)

shinyUI(fluidPage(
tags$head(
tags$script(src = 'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js')
tags$script(src = 'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js'),
tags$script(src = 'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cola.v3.min.js'),
tags$script(src = 'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js'),
tags$script(src = 'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/dagre.js')
),

# Application title
Expand All @@ -12,7 +15,7 @@ shinyUI(fluidPage(
sidebarPanel(width=3,
sliderInput("maxInteractions", "Maximum Interactions:", min=1, max=75, value=10),
selectInput("layout", "Layout:",
choices=c("grid", "random", "circle", "breadthfirst", "cose"),
choices=c("grid", "random", "circle", "breadthfirst", "cose", "springy", "cola", "dagre"),
selected="grid",
multiple=FALSE),
checkboxInput("addLinks", "Add Links on Nodes?", TRUE)
Expand Down

0 comments on commit 5e22fae

Please sign in to comment.