Как отправить объект JSON из R / Shiny в Cytoscape.js? - PullRequest
Новая
       16

Как отправить объект JSON из R / Shiny в Cytoscape.js?

0 голосов
/ 03 июля 2018

Я пытаюсь использовать Cytoscape.js в приложении R / Shiny. Отдельный конвейер выполняет некоторые вычисления и создает правильно отформатированный объект JSON для Cytoscape.js (см. здесь ). Затем я хочу использовать приложение 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), я получаю кучу следующих ошибок:

errors

Для полноты, вот фрагмент файла 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 ... возможно, session$sendCustomeMessage() из Shiny не кодирует объекты так, как нужно Cytoscape.js, но я не знаю, как это решить.

1 Ответ

0 голосов
/ 12 июля 2018

Я бы предпочел опубликовать это как комментарий, потому что я не уверен, что понимаю проблему. Но это слишком долго для комментария.

Если необходимы символьные значения 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))
...