Planned features

[arunge]

The goal is to generate network-like representations based on pre-selected options using this package: https://rich-iannone.github.io/DiagrammeR/

• [ ] #5

• User can create and share a template json file, where this defines the elements to be included (see family example below). • This template json file consists of which network elements can be used and which metadata is associated to each. Users load one of these json files and can then start defining their relational structure. For instance, a json file may be used to link family relationships (metadata could be name of each person, date of birth, etc.) and there could be two main elements (male or female). • Based on the template json file users can then describe an actual network which is saved as a separate json file (instance). Continuing with the family example, users would enter the different individuals (their metadata) and define their relationships (represented using arrows). A visual representation of this would look something like a family tree. • Unique IDs are required for each element and link. • This instance file can be saved, loaded, and edited. A log is kept of any change, including the identification of the users who made the edits and the time when edits were made. • To load either template or instance files use the Pandora data import module.

• In the log, a cheksum (e.g., see: https://stat.ethz.ch/R-manual/R- devel/library/tools/html/md5sum.html) is used to authenticate changes made by different users.

• Visual options to set the display of each element (e.g., shape, colour, unique IDs) and arrow (e.g., type of arrow, thickness, colour, text tags to be used). Overall movement and zoom in/zoom out on network structure. • There should be a drop down list option where users can quickly display different loaded instances. • Linking separate instances. As mentioned above a user can load multiple instances. A case to consider, is when there are links between elements placed in different instances. To implement this, a special element should always be available. As metadata, it will include the name of the external instance, the type of link(s) (arrow(s)), and the unique IDs for external elements.

[arunge]

Trying out DiagrammeR

Regarding:

• User can create and share a template json file, where this defines the elements to be included (see family example below).

• use get_nodes_df() to extract the nodes
  • create the .json with jsonlite::toJSON()
  • or (?) create the .yaml with yaml::as.yaml()

• This template json file consists of which network elements can be used and which metadata is associated to each. Users load one of these json files and can then start defining their relational structure. For instance, a json file may be used to link family relationships (metadata could be name of each person, date of birth, etc.) and there could be two main elements (male or female).

• These are possible nodes of a graph defined in one json.

• Based on the template json file users can then describe an actual network which is saved as a separate json file (instance). Continuing with the family example, users would enter the different individuals (their metadata) and define their relationships (represented using arrows). A visual representation of this would look something like a family tree.

• The edges are defined after nodes were loaded

• Unique IDs are required for each element and link.

• when creating nodes or edges IDs are already set automatically:

• This instance file can be saved, loaded, and edited. A log is kept of any change, including the identification of the users who made the edits and the time when edits were made.

• Edges can be stored in a separate json file, use get_edge_df()
• apply pre-defined functions, check:

• This instance file can be saved, loaded, and edited. A log is kept of any change, including the identification of the users who made the edits and the time when edits were made. • In the log, a cheksum (e.g., see: https://stat.ethz.ch/R-manual/R-devel/library/tools/html/md5sum.html) is used to authenticate changes made by different users.

• each graph has a list entry graph_log tracking e.g. the time when a graph was modified and the used function:
• the user ID must be added as a new column user_id

• Visual options to set the display of each element (e.g., shape, colour, unique IDs) and arrow (e.g., type of arrow, thickness, colour, text tags to be used).

• possible styling of nodes and edges:

Overall movement and zoom in/zoom out on network structure.

• this feature must be developed
• here we need to define subgraphs
• when zoom in: display sub graph
• when zoom out: display parent graph
• nodes that contain sub graphs should look different than simple nodes -> use a specific styling that is specific only for this case
• using width and height in render_graph(width, height) makes the graph smaller/larger
• do we need to show only a part of the plot and to move left/right/up/down ?

[arunge]

Requested features:

Create a template

• name a new graph: create_graph(graph_name = ...)
  • a template is a graph having ONLY elements (nodes)
• add elements (nodes): add_node()

Export a template

• button to export the template
  • create the .json with jsonlite::toJSON() %>% jsonlite::write_json("xy.json")
  • or (?) create the .yaml with yaml::as.yaml() %>% writeLines("xy.yaml")

Load a template (from pandora / file)

• pandora module needs to be extended
• button to import a template from pandora
  • load a .json with jsonlite::read_json("xy.json", simplifyVector = TRUE) %>% jsonlite::fromJSON()
  • or (?) load a .yaml with yaml::read_yaml("xy.yaml") %>% as.data.frame()

Add relations

• select source node
• select target node
• button to create an edge: add_edge()

Save current instance

• name the instance
  • an instance is a graph having elements (nodes) AND relations (edges)
• store the relations (edges)

Load a different instance into the current session

• select an instance
• button to load the instance

Export relations

• select the instance to export
• store the edges into a separate .json file
• we need to keep an id of the template of nodes that was used
• button for export of relations (edges)

Discuss:

• Why .json? .json vs. .yaml

.yaml of edges	.json of the same edges

• Zooming:
  • using width and height in render_graph(width, height) will make the graph itself (nodes and edges) smaller/larger
  • do we need to show only a part of the plot and to move left/right/up/down ?

... IN PROGRESS...

[arunge]

Before we will continue here, we must check a very important part:

1) Ability to travel along the network (as with our IsoMemo maps) and to Zoom in/out 2) Interact with network elements (e.g., click on a node and display associated metadata) 3) Search network element by name and focus on this 4) A special type of interaction which allows us to visualize the network within a node

[f-lukas]

After some research I'd say point 1. and 2. are possible and 3. and 4. are difficult. Here is a simple app that allows zooming and panning and returns the node id when clicking on a node. This click information can be used to show more node informations. About the zooming: Currently the plot moves out of the original image bounds. This needs to be changed but I think we could find a solution for this.

library(shiny)
library(DiagrammeR)

# Define UI
ui <- fluidPage(

  # js for zooming
  tags$head(
    tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js")
  ),

  # Application title
  titlePanel("Simple Flowchart Generator"),

  # Sidebar layout with input and output definitions
  sidebarLayout(

    # Sidebar panel for inputs
    sidebarPanel(
      actionButton("generate_flowchart", "Generate Flowchart")
    ),

    # Main panel for displaying the flowchart
    mainPanel(
      textOutput("clickMessage"),
      grVizOutput("flowchart"),
      tags$script(
        HTML('panzoom($("#flowchart")[0])')
      )
    ),
  )
)

# Define server logic
server <- function(input, output) {
  # Generate the flowchart when the button is clicked
  observeEvent(input$generate_flowchart, {
    example_graph <-
      create_graph() %>%
      add_pa_graph(
        n = 50, m = 1,
        set_seed = 23
      ) %>%
      add_gnp_graph(
        n = 50, p = 1 / 100,
        set_seed = 23
      ) %>%
      join_node_attrs(df = get_betweenness(.)) %>%
      join_node_attrs(df = get_degree_total(.)) %>%
      colorize_node_attrs(
        node_attr_from = total_degree,
        node_attr_to = fillcolor,
        palette = "Greens",
        alpha = 90
      ) %>%
      rescale_node_attrs(
        node_attr_from = betweenness,
        to_lower_bound = 0.5,
        to_upper_bound = 1.0,
        node_attr_to = height
      ) %>%
      select_nodes_by_id(nodes = get_articulation_points(.)) %>%
      set_node_attrs_ws(node_attr = peripheries, value = 2) %>%
      set_node_attrs_ws(node_attr = penwidth, value = 3) %>%
      clear_selection() %>%
      set_node_attr_to_display(attr = NULL)
    output$flowchart <- renderGrViz({
      render_graph(example_graph, layout = "nicely", as_svg = TRUE)
    })
  })
  output$clickMessage <- renderText({
    req(input$flowchart_click)
    paste0("You clicked the node, which has the ID ", input$flowchart_click$id[[1]], ".")
  })
}

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

[f-lukas]

I talked with @arunge about point 3 and 4.

3. Search network element by name and focus on this

We could add a select input. Users can search elements within the select input or instead click on a node within the diagramme. After selecting one element (node) we can highlight this element using a specific background and/or border color.

4. A special type of interaction which allows us to visualize the network within a node

Clicking on a node or selecting a node within a select input could trigger the creation of a new plot that visualizes the network within the selected node.

To summarize... Along with my notes about point 1 and 2 here https://github.com/Pandora-IsoMemo/TraceR/issues/1#issuecomment-1805961707, all open points below should be manageable with DiagrammeR.

Before we will continue here, we must check a very important https://github.com/Pandora-IsoMemo/RelationalR/issues/2#issuecomment-1798562491:

1. Ability to travel along the network (as with our IsoMemo maps) and to Zoom in/out
2. Interact with network elements (e.g., click on a node and display associated metadata)
3. Search network element by name and focus on this
4. A special type of interaction which allows us to visualize the network within a node

[f-lukas]

@arunge The first minimal example of TraceR is now available here: https://pandoraapp.earth/app/tracer-beta

[arunge]

@f-lukas as discussed, I will check details regarding:

• https://github.com/Pandora-IsoMemo/TraceR/issues/5

Afterwards, we can continue here.