Create demos for R

demosR/usage-animated-bfs.R

@@ -0,0 +1,71 @@
+# original demo: http://js.cytoscape.org/demos/animated-bfs/
+# code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/animated-bfs
+#
+# note: animation not implemented yet, please refer to code.
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'a')),
+  list('data' = list('id' = 'b')),
+  list('data' = list('id' = 'c')),
+  list('data' = list('id' = 'd')),
+  list('data' = list('id' = 'e')),
+  list('data' = list('id' = 'a"e', 'weight' = 1, 'source' = 'a', 'target' = 'e')),
+  list('data' = list('id' = 'ab', 'weight' = 3, 'source' = 'a', 'target' = 'b')),
+  list('data' = list('id' = 'be', 'weight' = 4, 'source' = 'b', 'target' = 'e')),
+  list('data' = list('id' = 'bc', 'weight' = 5, 'source' = 'b', 'target' = 'c')),
+  list('data' = list('id' = 'ce', 'weight' = 6, 'source' = 'c', 'target' = 'e')),
+  list('data' = list('id' = 'cd', 'weight' = 2, 'source' = 'c', 'target' = 'd')),
+  list('data' = list('id' = 'de', 'weight' = 7, 'source' = 'd', 'target' = 'e'))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list(
+          'name' = 'breadthfirst',
+          'directed' = TRUE,
+          'roots' = '#a',
+          'padding' = 10
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'content' = 'data(id)'
+            )
+          ), list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'bezier',
+              'target-arrow-shape' = 'triangle',
+              'width' = 4,
+              'line-color' = '#ddd',
+              'target-arrow-color' = '#ddd'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0,
+          'z-index' = 999
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)

demosR/usage-breadthfirst-layout.R

@@ -0,0 +1,128 @@
+# original demo: http://js.cytoscape.org/demos/images-breadthfirst-layout/
+#
+# note: click animation is not implemented
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'cat')),
+  list('data' = list('id' = 'bird')),
+  list('data' = list('id' = 'ladybug')),
+  list('data' = list('id' = 'aphid')),
+  list('data' = list('id' = 'rose')),
+  list('data' = list('id' = 'grasshopper')),
+  list('data' = list('id' = 'plant')),
+  list('data' = list('id' = 'wheat')),
+  list('data' = list('source' = 'cat', 'target' = 'bird')),
+  list('data' = list('source' = 'bird', 'target' = 'ladybug')),
+  list('data' = list('source' = 'bird', 'target' = 'grasshopper')),
+  list('data' = list('source' = 'grasshopper', 'target' = 'plant')),
+  list('data' = list('source' = 'grasshopper', 'target' = 'wheat')),
+  list('data' = list('source' = 'ladybug', 'target' = 'aphid')),
+  list('data' = list('source' = 'aphid', 'target' = 'rose'))
+)
+
+# define stylesheet
+stylesheet <- list(
+  list(
+    'selector' = 'node',
+    'style' = list(
+      'height' = 80,
+      'width' = 80,
+      'background-fit' = 'cover',
+      'border-color' = '#000',
+      'border-width' = 3,
+      'border-opacity' = 0.5
+    )
+  ),
+  list(
+    'selector' = 'edge',
+    'style' = list(
+      'curve-style' = 'bezier',
+      'width' = 6,
+      'target-arrow-shape' = 'triangle',
+      'line-color' = '#ffaaaa',
+      'target-arrow-color' = '#ffaaaa'
+    )
+  ),
+  list(
+    'selector' = '#bird',
+    'style' = list(
+      'background-image' = 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#cat',
+    'style' = list(
+      'background-image' = 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#ladybug',
+    'style' = list(
+      'background-image' = 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#aphid',
+    'style' = list(
+      'background-image' = 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#rose',
+    'style' = list(
+      'background-image' = 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#grasshopper',
+    'style' = list(
+      'background-image' = 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#plant',
+    'style' = list(
+      'background-image' = 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
+    )
+  ),
+  list(
+    'selector' = '#wheat',
+    'style' = list(
+      'background-image' = 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
+    )
+  )
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        stylesheet = stylesheet,
+        layout = list(
+          'name' = 'breadthfirst',
+          'directed' = TRUE,
+          'padding' = 10
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)

demosR/usage-circle-layout.R

@@ -0,0 +1,53 @@
+# original demo: http://js.cytoscape.org/demos/circle-layout/
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# load data
+elements <- fromJSON("demos/data/circle-layout/data.json")
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list('name' = 'circle'),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'height' = 20,
+              'width' = 20,
+              'background-color' = '#e8e406'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'haystack',
+              'haystack-radius' = 0,
+              'width' = 5,
+              'opacity' = 0.5,
+              'line-color' = '#f2f08c'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0,
+          'z-index' = 999
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)

demosR/usage-compound-nodes.R

@@ -0,0 +1,83 @@
+# original demo: http://js.cytoscape.org/demos/compound-nodes/
+#
+
+library(dash)
+library(dashCytoscape)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'a', 'parent' = 'b'), 'position' = list('x' = 215, 'y' = 85)),
+  list('data' = list('id' = 'b')),
+  list('data' = list('id' = 'c', 'parent' = 'b'), 'position' = list('x' = 300, 'y' = 85)),
+  list('data' = list('id' = 'd'), 'position' = list('x' = 215, 'y' = 175)),
+  list('data' = list('id' = 'e')),
+  list('data' = list('id' = 'f', 'parent' = 'e'), 'position' = list('x' = 300, 'y' = 175)),
+  list('data' = list('id' = 'ad', 'source' = 'a', 'target' = 'd')),
+  list('data' = list('id' = 'eb', 'source' = 'e', 'target' = 'b'))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        boxSelectionEnabled = FALSE,
+        autounselectify = TRUE,
+        layout = list(
+          'name' = 'preset',
+          'padding' = 5
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'content' = 'data(id)',
+              'text-valign' = 'center',
+              'text-halign' = 'center'
+            )
+          ),
+          list(
+            'selector' = '$node > node',
+            'style' = list(
+              'padding-top' = '10px',
+              'padding-left' = '10px',
+              'padding-bottom' = '10px',
+              'padding-right' = '10px',
+              'text-valign' = 'top',
+              'text-halign' = 'center',
+              'background-color' = '#bbb'
+            )
+          ),
+          list(
+            'selector' = ':selected',
+            'style' = list(
+              'background-color' = 'black',
+              'line-color' = 'black',
+              'target-arrow-color' = 'black',
+              'source-arrow-color' = 'black'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'target-arrow-shape' = 'triangle'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)