can i take user input inside node here i take 22 input at top of input box can this input box implemented inside node itself or top that node?

[sandhya_tuptewar]

library(shiny)
library(DiagrammeR)
library(visNetwork)


ui <- fluidPage(
  textInput("node_A", " A:",width = '50px'),
  textInput("node_B", " B:",width = '50px'),
  grVizOutput("my_graphviz")
)

server <- function(input, output) {
  output$my_graphviz <- renderDiagrammeR({
    # Convert inputs to integers
    node_A <- as.integer(input$node_A)
    node_B <- as.integer(input$node_B)
    node_d<-(input$node_d)
    
    # Calculate sum of node A and B
    node_c <- node_A + node_B
    
    my_graphviz <- grViz(paste0("digraph {

                     graph[rankdir = LR]

                     node[shape = ellipse, style = filled]
                     A[label = '", node_A, "']
                     B[label = '", node_B, "']
                     c[label = '", node_c, "']
                     d[label = '+", node_d, "']


                     edge[color = black]
                     A->d
                     B->d
                     d->c


                     }"))
    my_graphviz
  })
}

shinyApp(ui, server)

[nirgrahamuk]

I didnt think this was possible out of the box, and I still think so. However visNetwork has visEvents, and I asked Bings chat-ai to write code to use javascript to make a dynamic input on the chart and I arrived at this working demo.

library(shiny)
library(visNetwork)

ui <- fluidPage(
  tags$head(tags$script('
    function createInputBox(x, y) {
      var input = document.createElement("input");
      input.type = "text";
      input.style.position = "absolute";
      input.style.left = x + "px";
      input.style.top = y + "px";
      document.body.appendChild(input);
      input.focus();
      
      return input;
    }
  ')),
  visNetworkOutput("network")
)

server <- function(input, output) {
  nodes <- data.frame(id = 1:3, label = c("A", "B", "C"))
  edges <- data.frame(from = c(1,2), to = c(2,3))
  
  output$network <- renderVisNetwork({
    visNetwork(nodes, edges) %>%
      visEvents(click = "function(params) {
        if (params.nodes.length > 0) {
          var nodeId = params.nodes[0];
          var nodePosition = this.getPositions([nodeId])[nodeId];
          var canvasPosition = this.canvasToDOM({x: nodePosition.x, y: nodePosition.y});
          
          var inputBox = createInputBox(canvasPosition.x + this.body.container.offsetLeft,
                                        canvasPosition.y + this.body.container.offsetTop);
          
          inputBox.onblur = function() {
            Shiny.setInputValue('newLabel', {id: nodeId, label: inputBox.value});
            document.body.removeChild(inputBox);
          };
          
          inputBox.onkeydown = function(event) {
            if (event.key === 'Enter') {
              Shiny.setInputValue('newLabel', {id: nodeId, label: inputBox.value});
              document.body.removeChild(inputBox);
            }
          };
        }
      }")
  })
  
  observeEvent(input$newLabel,{
    nodes[input$newLabel$id,"label"] <<- input$newLabel$label
    visNetworkProxy("network") %>%
      visUpdateNodes(nodes)
  })
}

shinyApp(ui = ui, server = server)

[sandhya_tuptewar]

it is not using full window size ,can we use full window so that we can create huge graph network on full window? it is only using half part of window size,graph is visible on half of window size only.

[sandhya_tuptewar]

can i use visnetwork and digrammer r functionality on one graph is yes give me one sample code which using both .