Skip to content

Commit

Permalink
setNodeAttributes changed as Max proposed, issue #7
Browse files Browse the repository at this point in the history
  • Loading branch information
@paul-shannon
paul-shannon committed Oct 9, 2018
1 parent 518a8bb commit 0625686
Show file tree
Hide file tree
Showing 7 changed files with 132 additions and 110 deletions.
4 changes: 2 additions & 2 deletions DESCRIPTION
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Package: cyjShiny
Title: cyjShiny
Version: 0.99.20
Date: 2018-09-26
Version: 0.99.21
Date: 2018-10-09
Author: Omar Shah, Paul Shannon
Maintainer: Paul Shannon <[email protected]>
Description: This package provides cytoscape.js as a shiny widget.
Expand Down
16 changes: 8 additions & 8 deletions R/cyjShiny.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@ cyjShiny <- function(graph, layoutName, styleFile=NA, width = NULL, height = NUL
height = height,
package = 'cyjShiny',
elementId = elementId,
sizingPolicy = htmlwidgets::sizingPolicy(
defaultWidth=500,
defaultHeight=500,
viewer.padding=0,
viewer.suppress=FALSE,
viewer.paneHeight=500,
browser.fill=TRUE)
sizingPolicy = htmlwidgets::sizingPolicy(browser.fill=TRUE, )
# defaultWidth=500,
# defaultHeight=500,
# viewer.padding=0,
# viewer.suppress=FALSE,
# viewer.paneHeight=500,
# browser.fill=TRUE)
)

} # cyjShiny constructor
Expand All @@ -80,7 +80,7 @@ cyjShiny <- function(graph, layoutName, styleFile=NA, width = NULL, height = NUL
#'
#' @export

cyjShinyOutput <- function(outputId, width = '100%', height = '400px')
cyjShinyOutput <- function(outputId, width = '100%', height = '800')
{
htmlwidgets::shinyWidgetOutput(outputId, 'cyjShiny', width, height, package = 'cyjShiny')
}
Expand Down
67 changes: 33 additions & 34 deletions browserCode/src/cyjShiny.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ HTMLWidgets.widget({
name: 'cyjShiny',
type: 'output',

factory: function(el, width, height) {
factory: function(el, allocatedWidth, allocatedHeight) {
var cyj;
return {
renderValue: function(x, instance) {
Expand All @@ -37,49 +37,52 @@ HTMLWidgets.widget({

ready: function(){
console.log("cyjShiny cyjs ready");
$("#cyjShiny").height(0.95*window.innerHeight);
//$("#cyjShiny").height(0.95*window.innerHeight);
console.log("cyjShiny widget, initial dimensions: " + allocatedWidth + ", " + allocatedHeight)
$("#cyjShiny").height(allocatedHeight)
$("#cyjShiny").width(allocatedWidth)
var cyj = this;
window.cyj = this; // terrible hack. but gives us a simple way to call cytosacpe functions
console.log("small cyjs network ready, with " + cyj.nodes().length + " nodes.");
console.log(" initial widget dimensions: " +
$("#cyjShiny").width() + ", " +
$("#cyjShiny").height());

cyj.nodes().map(function(node){node.data({degree: node.degree()})});
setTimeout(function() {
cyj.fit(100)
}, 600);
} // ready
}) // cytoscape()
}, // renderValue
resize: function(width, height, instance){
console.log("cyjShiny widget, resize: " + width + ", " + height)
$("#cyjShiny").height(0.8 * window.innerHeight);
resize: function(newWidth, newHeight, instance){
console.log("cyjShiny widget, resize: " + newWidth + ", " + newHeight)
//$("#cyjShiny").height(0.95 * window.innerHeight);
$("#cyjShiny").height(newHeight);
cyj.resize()
console.log(" after resize: " + width + ", " + height)
console.log(" after resize, widget dimensions: " +
$("#cyjShiny").width() + ", " +
$("#cyjShiny").height());
},
cyjWidget: cyj
}; // return
} // factory
}); // widget
//------------------------------------------------------------------------------------------------------------------------
// Shiny.addCustomMessageHandler("loadStyleFile", function(message){
//
// console.log("loadStyleFile requested: " + message.filename);
// loadStyle(message.filename)
//
// });
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("doLayout", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("doLayout", function(message){

var strategy = message.strategy;
self.cyj.layout({name: strategy}).run()
})

//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("removeGraph", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("removeGraph", function(message){

self.cyj.elements().remove();
})

//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("addGraph", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("addGraph", function(message){

var jsonString = message.graph;
var g = JSON.parse(jsonString);
Expand All @@ -88,33 +91,29 @@ Shiny.addCustomMessageHandler("addGraph", function(message){
})

//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("redraw", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("redraw", function(message){

console.log("redraw requested");
self.cyj.style().update();
})

//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("setNodeAttributes", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("setNodeAttributes", function(message){

console.log("setNodeAttributes requested")

var nodeIDs = message.nodes;
var attributeName = message.attribute;

for(var i=0; i < nodeIDs.length; i++){
var id = nodeIDs[i];
var newValue = message.values[i];
var filterString = "[id='" + id + "']";
var dataObj = self.cyj.nodes().filter(filterString).data();

Object.defineProperty(dataObj, attributeName, {value: newValue});
};

self.cyj.style().update();
var id = nodeIDs[i];
var newValue = message.values[i];
var node = self.cyj.getElementById(id);
node.data({[attributeName]: newValue});
};
})
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("selectNodes", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("selectNodes", function(message){

console.log("selectNodes requested: " + message);

Expand All @@ -137,14 +136,14 @@ Shiny.addCustomMessageHandler("selectNodes", function(message){

});
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("clearSelection", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("clearSelection", function(message){

console.log("clearSelection requested: " + message);
self.cyj.filter("node:selected").unselect();

})
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("getSelectedNodes", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("getSelectedNodes", function(message){

console.log("getSelectedNodes requested: " + message);
var value = self.cyj.filter("node:selected")
Expand All @@ -158,14 +157,14 @@ Shiny.addCustomMessageHandler("getSelectedNodes", function(message){

});
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("sfn", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("sfn", function(message){

console.log("sfn requested: " + message);
self.cyj.nodes(':selected').neighborhood().nodes().select();

})
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("fitSelected", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("fitSelected", function(message){

console.log("fitSelected requested");
var padding = message.padding;
Expand All @@ -181,14 +180,14 @@ Shiny.addCustomMessageHandler("fitSelected", function(message){
}
})
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("fit", function(message){
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("fit", function(message){
console.log("fit requested: ");
var padding = message.padding;
console.log(" padding: " + padding)
self.cyj.fit(padding);
});
//------------------------------------------------------------------------------------------------------------------------
Shiny.addCustomMessageHandler("loadStyle", function(message) {
if(HTMLWidgets.shinyMode) Shiny.addCustomMessageHandler("loadStyle", function(message) {

console.log("loading style");
var styleSheet = message.json;
Expand Down
18 changes: 8 additions & 10 deletions inst/examples/dataFrameGraphWithAnimation/app.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ tbl.edges <- data.frame(source=c("A", "B", "C"),

graph.json <- dataFramesToJSON(tbl.edges, tbl.nodes)

tbl.lfc <- data.frame(A=c(0, 1, 1, -3),
B=c(0, 3, 2, 3),
C=c(0, -3, -2, -1),
tbl.lfc <- data.frame(A=c(0, 1, 1, -3),
B=c(0, 3, 2, 3),
C=c(0, -3, -2, -1),
stringsAsFactors=FALSE)

rownames(tbl.lfc) <- c("baseline", "cond1", "cond2", "cond3")
Expand Down Expand Up @@ -66,9 +66,7 @@ ui = shinyUI(fluidPage(
htmlOutput("selectedNodesDisplay"),
width=2
),
mainPanel(cyjShinyOutput('cyjShiny'),
width=10
)
mainPanel(cyjShinyOutput('cyjShiny'),width=10)
) # sidebarLayout
))
#----------------------------------------------------------------------------------------------------
Expand All @@ -78,16 +76,16 @@ server = function(input, output, session)
fit(session, 80)
})

observeEvent(input$showCondition, ignoreInit=FALSE, {
observeEvent(input$showCondition, ignoreInit=TRUE, {
condition.name <- isolate(input$showCondition)
printf(" condition.name: %s", condition.name)
#printf(" condition.name: %s", condition.name)
values <- as.numeric(tbl.lfc[condition.name,])
node.names <- colnames(tbl.lfc)
printf("sending lfc values for %s: %s", paste(node.names, collapse=", "), paste(values, collapse=", "))
#printf("sending lfc values for %s: %s", paste(node.names, collapse=", "), paste(values, collapse=", "))
setNodeAttributes(session, attributeName="lfc", nodes=node.names, values)
values <- as.numeric(tbl.count[condition.name,])
node.names <- colnames(tbl.count)
printf("sending count values for %s: %s", paste(node.names, collapse=", "), paste(values, collapse=", "))
#printf("sending count values for %s: %s", paste(node.names, collapse=", "), paste(values, collapse=", "))
setNodeAttributes(session, attributeName="count", nodes=colnames(tbl.count), values)
})

Expand Down
3 changes: 3 additions & 0 deletions inst/examples/dataFrameGraphWithAnimation/style01.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
"text-halign":"center",
"background-color": "lightgreen",
"border-color": "black",
"shape": "ellipse",
"width": "mapData(count, 0, 300, 30, 80)",
"height": "mapData(count, 0, 300, 30, 80)",
"content": "data(id)",
"border-width": "1px"
}},
Expand Down
5 changes: 2 additions & 3 deletions inst/examples/loadGraphFromJSONfile/app.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,8 @@ ui = shinyUI(fluidPage(
htmlOutput("selectedNodesDisplay"),
width=2
),
mainPanel(cyjShinyOutput('cyjShiny'),
width=10
)
mainPanel(cyjShinyOutput('cyjShiny'), width=10),
fluid=FALSE
) # sidebarLayout
))
#----------------------------------------------------------------------------------------------------
Expand Down
Loading

0 comments on commit 0625686

Please sign in to comment.