如何将 JSON 对象从 R/Shiny 发送到 Cytoscape.js？

Question

我正在尝试在 R/Shiny 应用程序中使用 Cytoscape.js。一个单独的管道进行一些计算，并为 Cytoscape.js 创建一个格式正确的 JSON 对象（参见 here）。然后我想使用 Shiny 应用程序读取文件，并呈现网络可视化。到目前为止，我有这个产生错误的工作示例：

app.r

#
# This is a Shiny web application. You can run the application by clicking
# the 'Run App' button above.
#
# Find out more about building applications with Shiny here:
#
#    http://shiny.rstudio.com/
#

library(shiny)
library(rcytoscapejs)
library(DT)
library(jsonlite)

ui <- navbarPage("Shiny Protein Visualization using Cytoscape.js",
                 tabPanel("Network",
                          sidebarLayout(
                            sidebarPanel(
                              actionButton("imprtJSON", "JSON Test (not working)"),
                              width=3),
                            mainPanel(
                              rcytoscapejsOutput("cy", height="600px")
                            )
                          )
                 ),
                 tags$head(tags$script(src="cyjs.js"))
)

server <- function(input, output, session) {

  observeEvent(input$imprtJSON, {
    # message <- 

    # message$elements_json <- toJSON(message$elements_json)
    # message$style_json <- toJSON(message$style_json)
    # browser()
    session$sendCustomMessage("loadJSON",
                              message = list(alertMessage = "Testing sending JSON object from R to JS",
                                             elements_json = read_json("data/graph_elements0044.json")))
  })


}

# Run the application 
shinyApp(ui = ui, server = server)

www/cytojs.js

 $(document).ready(function() {

      Shiny.addCustomMessageHandler("loadJSON",
        function(message) {

          //var expJson = JSON.stringify(message.elements_json);
          //var styleJson = JSON.stringify(message.style_json);

          var expJson = message.elements_json;
          //var styleJson = message.style_json;

          var cy = cytoscape({
            container: document.getElementById('cy'),
            layout: {
              name: 'preset',
              fit: true
            },
            elements: expJson,
            style: [ 
            {
             selector: 'node',
             style: {
              'background-color': '#666',
              'label': 'data(id)'
                }
            },
            {
             selector: 'edge',
             style: {
              'width': 3,
              'line-color': '#ccc',
              'target-arrow-color': '#ccc',
              'target-arrow-shape': 'triangle'
             }
          }
         ]
          });  
        });  
    });

对于这个例子，一旦我按下按钮，我希望网络被渲染并出现在应用程序中。当我运行这样做并在我的网络浏览器 (Chrome) 中调出开发者工具控制台时，我得到了一堆这样的错误：

为了完整起见，这里是我正在加载的 graph_elements0044.json 文件的片段：

[
    {
        "data": {
            "ac_uniprot": "Q02535", 
            "gene": "ID3", 
            "role": "whole", 
            "id": 0, 
            "parent": 0
        }, 
        "group": "nodes"
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "start-end", 
            "id": 1, 
            "parent": 0, 
            "label": "0"
        }, 
        "group": "nodes", 
        "position": {
            "y": 225.0, 
            "x": 742.0
        }
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "start-end", 
            "id": 2, 
            "parent": 0, 
            "label": "119"
        }, 
        "group": "nodes", 
        "position": {
            "y": 225.0, 
            "x": 860.0
        }
    }, 
    {
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "parent": 0, 
            "color": "#CDBE70", 
            "label": "HLH", 
            "role": "domain", 
            "id": 3
        }, 
        "group": "nodes"
    }, 
    {
        "position": {
            "y": 225.0, 
            "x": 784.0
        }, 
        "data": {
            "parent_ac_uniprot": "Q02535", 
            "role": "dom_pos", 
            "id": 4, 
            "parent": 3, 
            "label": "42"
        }, 
        "group": "nodes"
    }
]

当我手动进入并更改 JSON 文件以在 id 属性周围加上引号时，它起作用了，但这显然不是一个实用的解决方案。我是 JavaScript 的新手，我已经用尽了所有我能想到的方法来让它工作。这显然与 JSON 格式有关...也许 Shiny 的 session$sendCustomeMessage() 没有根据 Cytoscape.js 的需要对对象进行编码，但我不知道如何解决这个问题。

Answer 1

我更愿意 post 将此作为评论，因为我不确定是否理解问题所在。但这对于评论来说太长了。

如果需要 id 的字符值但又不想更改文件，则可以（在 R 文件的开头）

json <- lapply(read_json("data/graph_elements0044.json"), function(x){
  x$data$id <- as.character(x$data$id) 
  return(x)
})

然后在 server.R:

session$sendCustomMessage("loadJSON",
                          message = list(alertMessage = "Testing sending JSON object from R to JS",
                                         elements_json = json))

如何将 JSON 对象从 R/Shiny 发送到 Cytoscape.js？

How to send JSON object from R/Shiny to Cytoscape.js?

javascript

r

shiny

cytoscape.js

app.r

www/cytojs.js