---
title: "Crosstalk"
author: "John Coene"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Crosstalk}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  warning = FALSE
)
library(htmltools)
```

## Standard

<span class="text-warning"><i class="fa fa-warning"></i> still in development.</span>

Since `v0.1.0` the package is `crosstalk` integrated.

Because graphs consist of two data.frames (nodes and edges), [crosstalk](https://rstudio.github.io/crosstalk/) is restricted to one of them, nodes. In essence, not much changes, you use the `SharedData` built with `crosstalk` like you would normally use the `nodes` data frame. 

**Pass your node ids as keys in `SharedData`*

```{r}
library(DT)
library(sigmajs)
library(crosstalk)

nodes <- sg_make_nodes(20)
edges <- sg_make_edges(nodes)

# pass node ids as keys
sd <- SharedData$new(nodes, key = nodes$id)

div(
  class = "row",
  div(
    class = "col-md-6",
    sigmajs() %>% 
      sg_nodes(sd, id, color, size, label) %>% 
      sg_edges(edges, id, source, target) %>% 
      sg_layout() %>% 
      sg_settings(
        mouseWheelEnabled = FALSE
      )
  ),
  div(
    class = "col-md-6",
    datatable(sd, style = "bootstrap", class = "compact", width = "100%",
      selection = "single")
  )
)
```

## igraph

Crosstalk also works with  [other formats](articles/formats.html).

```{r, warning=FALSE}
library(DT)
library(sigmajs)
library(crosstalk)

g <- igraph::make_graph(sample(LETTERS, 50, replace = TRUE))

vertices <- igraph::as_data_frame(g, what = "vertices")
sd <- SharedData$new(vertices, key = vertices$name)

div(
  class = "row",
  div(
    class = "col-md-6",
    sigmajs() %>% 
      sg_from_igraph(g, sd = sd) %>% 
      sg_neighbours() %>% 
      sg_settings(
        mouseWheelEnabled = FALSE,
        defaultNodeColor = "#98D3A5"
      )
  ),
  div(
    class = "col-md-6",
    datatable(sd, style = "bootstrap", class = "compact", width = "100%",
      selection = "single")
  )
)
```