Added support for multiple instances in the same view

NAMESPACE

@@ -1,4 +1,5 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-export(''DashInteractiveGraphviz)
-export(dashInteractiveGraphviz)
+export(DashInteractiveGraphviz)
+export(dashInteractiveGraphviz)
+export(DashInteractiveGraphviz)

R/dashInteractiveGraphviz.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-dashInteractiveGraphviz <- function(id=NULL, selected=NULL, dot_source=NULL, engine=NULL, style=NULL, fit_button_style=NULL, fit_button_content=NULL, persistence=NULL, persisted_props=NULL, persistence_type=NULL) {
+dashInteractiveGraphviz <- function(id=NULL, dot_source=NULL, engine=NULL, fit_button_content=NULL, fit_button_style=NULL, persisted_props=NULL, persistence=NULL, persistence_type=NULL, selected=NULL, selected_edge=NULL, selected_node=NULL, style=NULL) {
 
-    props <- list(id=id, selected=selected, dot_source=dot_source, engine=engine, style=style, fit_button_style=fit_button_style, fit_button_content=fit_button_content, persistence=persistence, persisted_props=persisted_props, persistence_type=persistence_type)
+    props <- list(id=id, dot_source=dot_source, engine=engine, fit_button_content=fit_button_content, fit_button_style=fit_button_style, persisted_props=persisted_props, persistence=persistence, persistence_type=persistence_type, selected=selected, selected_edge=selected_edge, selected_node=selected_node, style=style)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'DashInteractiveGraphviz',
         namespace = 'dash_interactive_graphviz',
-        propNames = c('id', 'selected', 'dot_source', 'engine', 'style', 'fit_button_style', 'fit_button_content', 'persistence', 'persisted_props', 'persistence_type'),
+        propNames = c('id', 'dot_source', 'engine', 'fit_button_content', 'fit_button_style', 'persisted_props', 'persistence', 'persistence_type', 'selected', 'selected_edge', 'selected_node', 'style'),
         package = 'dashInteractiveGraphviz'
         )
 

dash_interactive_graphviz/DashInteractiveGraphviz.py

@@ -14,45 +14,69 @@ class DashInteractiveGraphviz(Component):
 intensive.
 
 Keyword arguments:
-- id (string; optional): The ID used to identify this component in Dash callbacks.
-- selected (string; optional): The ID of the selected node, retains functions of previous 'selected' prop
-- selected_node (string; optional): The ID of the selected node. Placeholder for superceding 'selected' prop.
-Same functionality as 'selected'
-- selected_edge (string; optional): The ID of the selected edge.
-- dot_source (string; optional): The dot language source of the graph
-- engine (string; default 'dot'): Styling to be applied to the graph container. You may want to change
-your graphviz background to transparent.
-- style (boolean | number | string | dict | list; optional): Changes the layout engine, see https://github.com/magjac/d3-graphviz#graphviz_engine
-for more information
-- fit_button_style (boolean | number | string | dict | list; optional): The style of the fit button.
-- fit_button_content (string; default '\u25A3'): The text content of the fit button, by default it is an small square unicode character.
-- persistence (boolean | string | number; optional): Used to allow user interactions in this component to be persisted when
-the component - or the page - is refreshed. If `persisted` is truthy and
-hasn't changed from its previous value, a `value` that the user has
-changed while using the app will keep that change, as long as
-the new `value` also matches what was given originally.
-Used in conjunction with `persistence_type`.
-- persisted_props (list of a value equal to: 'selected', 'selected_node', 'selected_edge', 'dot_source', 'engine's; default ['selected', 'selected_node', 'selected_edge', 'dot_source', 'engine']): Properties whose user interactions will persist after refreshing the
-component or the page. Since only `value` is allowed this prop can
-normally be ignored.
-- persistence_type (a value equal to: 'local', 'session', 'memory'; default 'local'): Where persisted user changes will be stored:
-memory: only kept in memory, reset on page refresh.
-local: window.localStorage, data is kept after the browser quit.
-session: window.sessionStorage, data is cleared once the browser quit."""
+
+- id (string; optional):
+    The ID used to identify this component in Dash callbacks.
+
+- dot_source (string; optional):
+    The dot language source of the graph.
+
+- engine (string; default 'dot'):
+    Styling to be applied to the graph container. You may want to
+    change your graphviz background to transparent.
+
+- fit_button_content (string; default '\u25A3'):
+    The text content of the fit button, by default it is an small
+    square unicode character.
+
+- fit_button_style (boolean | number | string | dict | list; optional):
+    The style of the fit button.
+
+- persisted_props (list of a value equal to: 'selected', 'selected_node', 'selected_edge', 'dot_source', 'engine's; default ['selected', 'selected_node', 'selected_edge', 'dot_source', 'engine']):
+    Properties whose user interactions will persist after refreshing
+    the component or the page. Since only `value` is allowed this prop
+    can normally be ignored.
+
+- persistence (boolean | string | number; optional):
+    Used to allow user interactions in this component to be persisted
+    when the component - or the page - is refreshed. If `persisted` is
+    truthy and hasn't changed from its previous value, a `value` that
+    the user has changed while using the app will keep that change, as
+    long as the new `value` also matches what was given originally.
+    Used in conjunction with `persistence_type`.
+
+- persistence_type (a value equal to: 'local', 'session', 'memory'; default 'local'):
+    Where persisted user changes will be stored: memory: only kept in
+    memory, reset on page refresh. local: window.localStorage, data is
+    kept after the browser quit. session: window.sessionStorage, data
+    is cleared once the browser quit.
+
+- selected (string; optional):
+    [Pending Deprecation] The ID of the selected node. Please use
+    selected_node (or selected_edge for edges).
+
+- selected_edge (string; optional):
+    The ID of the selected edge.
+
+- selected_node (string; optional):
+    The ID of the selected node.
+
+- style (boolean | number | string | dict | list; optional):
+    Changes the layout engine, see
+    https://github.com/magjac/d3-graphviz#graphviz_engine for more
+    information."""
     @_explicitize_args
     def __init__(self, id=Component.UNDEFINED, selected=Component.UNDEFINED, selected_node=Component.UNDEFINED, selected_edge=Component.UNDEFINED, dot_source=Component.UNDEFINED, engine=Component.UNDEFINED, style=Component.UNDEFINED, fit_button_style=Component.UNDEFINED, fit_button_content=Component.UNDEFINED, persistence=Component.UNDEFINED, persisted_props=Component.UNDEFINED, persistence_type=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'selected', 'selected_node', 'selected_edge', 'dot_source', 'engine', 'style', 'fit_button_style', 'fit_button_content', 'persistence', 'persisted_props', 'persistence_type']
+        self._prop_names = ['id', 'dot_source', 'engine', 'fit_button_content', 'fit_button_style', 'persisted_props', 'persistence', 'persistence_type', 'selected', 'selected_edge', 'selected_node', 'style']
         self._type = 'DashInteractiveGraphviz'
         self._namespace = 'dash_interactive_graphviz'
         self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'selected', 'selected_node', 'selected_edge', 'dot_source', 'engine', 'style', 'fit_button_style', 'fit_button_content', 'persistence', 'persisted_props', 'persistence_type']
+        self.available_properties = ['id', 'dot_source', 'engine', 'fit_button_content', 'fit_button_style', 'persisted_props', 'persistence', 'persistence_type', 'selected', 'selected_edge', 'selected_node', 'style']
         self.available_wildcard_properties =            []
-
         _explicit_args = kwargs.pop('_explicit_args')
         _locals = locals()
         _locals.update(kwargs)  # For wildcard attrs
         args = {k: _locals[k] for k in _explicit_args if k != 'children'}
-
         for k in []:
             if k not in args:
                 raise TypeError(

dash_interactive_graphviz/metadata.json

@@ -1,6 +1,6 @@
 {
   "src/lib/components/DashInteractiveGraphviz.react.js": {
-    "description": "An interactive graphviz renderer.\r\n\nRenders the dot language in the browser. It allows for panning and zooming\r\nand node selection. Changes in the dot_source will be animated.\r\n\nGraphviz is run in the browser via viz.js, so it can be computationally\r\nintensive.",
+    "description": "An interactive graphviz renderer.\n\nRenders the dot language in the browser. It allows for panning and zooming\nand node selection. Changes in the dot_source will be animated.\n\nGraphviz is run in the browser via viz.js, so it can be computationally\nintensive.",
     "displayName": "DashInteractiveGraphviz",
     "methods": [
       {
@@ -55,14 +55,14 @@
           "name": "string"
         },
         "required": false,
-        "description": "The ID of the selected node, retains functions of previous 'selected' prop"
+        "description": "[Pending Deprecation] The ID of the selected node.\nPlease use selected_node (or selected_edge for edges)"
       },
       "selected_node": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": "The ID of the selected node. Placeholder for superceding 'selected' prop.\r\nSame functionality as 'selected'"
+        "description": "The ID of the selected node."
       },
       "selected_edge": {
         "type": {
@@ -83,7 +83,7 @@
           "name": "string"
         },
         "required": false,
-        "description": "Styling to be applied to the graph container. You may want to change\r\nyour graphviz background to transparent.",
+        "description": "Styling to be applied to the graph container. You may want to change\nyour graphviz background to transparent.",
         "defaultValue": {
           "value": "'dot'",
           "computed": false
@@ -94,7 +94,7 @@
           "name": "any"
         },
         "required": false,
-        "description": "Changes the layout engine, see https://github.com/magjac/d3-graphviz#graphviz_engine\r\nfor more information",
+        "description": "Changes the layout engine, see https://github.com/magjac/d3-graphviz#graphviz_engine\nfor more information",
         "defaultValue": {
           "value": "{}",
           "computed": false
@@ -138,7 +138,7 @@
           ]
         },
         "required": false,
-        "description": "Used to allow user interactions in this component to be persisted when\r\nthe component - or the page - is refreshed. If `persisted` is truthy and\r\nhasn't changed from its previous value, a `value` that the user has\r\nchanged while using the app will keep that change, as long as\r\nthe new `value` also matches what was given originally.\r\nUsed in conjunction with `persistence_type`."
+        "description": "Used to allow user interactions in this component to be persisted when\nthe component - or the page - is refreshed. If `persisted` is truthy and\nhasn't changed from its previous value, a `value` that the user has\nchanged while using the app will keep that change, as long as\nthe new `value` also matches what was given originally.\nUsed in conjunction with `persistence_type`."
       },
       "persisted_props": {
         "type": {
@@ -170,7 +170,7 @@
           }
         },
         "required": false,
-        "description": "Properties whose user interactions will persist after refreshing the\r\ncomponent or the page. Since only `value` is allowed this prop can\r\nnormally be ignored.",
+        "description": "Properties whose user interactions will persist after refreshing the\ncomponent or the page. Since only `value` is allowed this prop can\nnormally be ignored.",
         "defaultValue": {
           "value": "['selected', 'selected_node', 'selected_edge', 'dot_source', 'engine']",
           "computed": false
@@ -195,7 +195,7 @@
           ]
         },
         "required": false,
-        "description": "Where persisted user changes will be stored:\r\nmemory: only kept in memory, reset on page refresh.\r\nlocal: window.localStorage, data is kept after the browser quit.\r\nsession: window.sessionStorage, data is cleared once the browser quit.",
+        "description": "Where persisted user changes will be stored:\nmemory: only kept in memory, reset on page refresh.\nlocal: window.localStorage, data is kept after the browser quit.\nsession: window.sessionStorage, data is cleared once the browser quit.",
         "defaultValue": {
           "value": "'local'",
           "computed": false
@@ -206,7 +206,7 @@
           "name": "func"
         },
         "required": false,
-        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
+        "description": "Dash-assigned callback that should be called to report property changes\nto Dash, to make them available for callbacks."
       }
     }
   }

dash_interactive_graphviz/package-info.json

@@ -1,6 +1,6 @@
 {
     "name": "dash_interactive_graphviz",
-    "version": "0.2.0",
+    "version": "0.2.0-dev",
     "description": "An interactive graphviz viewer for Dash",
     "repository": {
         "type": "git",
@@ -26,6 +26,7 @@
     "dependencies": {
         "d3": "^5.14.2",
         "d3-graphviz": "^2.6.1",
+        "lodash": "^4.17.21",
         "ramda": "^0.26.1",
         "react-sizeme": "^2.6.10"
     },
@@ -47,8 +48,8 @@
         "react": "^16.8.6",
         "react-docgen": "^4.1.1",
         "react-dom": "^16.8.6",
-        "styled-jsx": "^3.2.1",
         "style-loader": "^0.23.1",
+        "styled-jsx": "^3.2.1",
         "webpack": "4.36.1",
         "webpack-cli": "3.3.6",
         "webpack-serve": "3.1.0"

man/dashInteractiveGraphviz.Rd

@@ -10,27 +10,28 @@ An interactive graphviz renderer.  Renders the dot language in the browser. It a
 }
 
 \usage{
-dashInteractiveGraphviz(id=NULL, selected=NULL, dot_source=NULL, engine=NULL, style=NULL,
-fit_button_style=NULL, fit_button_content=NULL, persistence=NULL,
-persisted_props=NULL, persistence_type=NULL)
+dashInteractiveGraphviz(id=NULL, dot_source=NULL, engine=NULL,
+fit_button_content=NULL, fit_button_style=NULL,
+persisted_props=NULL, persistence=NULL,
+persistence_type=NULL, selected=NULL, selected_edge=NULL,
+selected_node=NULL, style=NULL)
 }
 
 \arguments{
 \item{id}{Character. The ID used to identify this component in Dash callbacks.}
 
-\item{selected}{Character. The ID of the selected node.}
-
 \item{dot_source}{Character. The dot language source of the graph}
 
 \item{engine}{Character. Styling to be applied to the graph container. You may want to change
 your graphviz background to transparent.}
 
-\item{style}{Logical | numeric | character | named list | unnamed list. Changes the layout engine, see https://github.com/magjac/d3-graphviz#graphviz_engine
-for more information}
+\item{fit_button_content}{Character. The text content of the fit button, by default it is an small square unicode character.}
 
 \item{fit_button_style}{Logical | numeric | character | named list | unnamed list. The style of the fit button.}
 
-\item{fit_button_content}{Character. The text content of the fit button, by default it is an small square unicode character.}
+\item{persisted_props}{List of a value equal to: 'selected', 'selected_node', 'selected_edge', 'dot_source', 'engine's. Properties whose user interactions will persist after refreshing the
+component or the page. Since only `value` is allowed this prop can
+normally be ignored.}
 
 \item{persistence}{Logical | character | numeric. Used to allow user interactions in this component to be persisted when
 the component - or the page - is refreshed. If `persisted` is truthy and
@@ -39,12 +40,21 @@ changed while using the app will keep that change, as long as
 the new `value` also matches what was given originally.
 Used in conjunction with `persistence_type`.}
 
-\item{persisted_props}{List of a value equal to: 'selected', 'dot_source', 'engine's. Properties whose user interactions will persist after refreshing the
-component or the page. Since only `value` is allowed this prop can
-normally be ignored.}
-
 \item{persistence_type}{A value equal to: 'local', 'session', 'memory'. Where persisted user changes will be stored:
 memory: only kept in memory, reset on page refresh.
 local: window.localStorage, data is kept after the browser quit.
 session: window.sessionStorage, data is cleared once the browser quit.}
+
+\item{selected}{Character. [Pending Deprecation] The ID of the selected node.
+Please use selected_node (or selected_edge for edges)}
+
+\item{selected_edge}{Character. The ID of the selected edge.}
+
+\item{selected_node}{Character. The ID of the selected node.}
+
+\item{style}{Logical | numeric | character | named list | unnamed list. Changes the layout engine, see https://github.com/magjac/d3-graphviz#graphviz_engine
+for more information}
 }
+
+\value{named list of JSON elements corresponding to React.js properties and their values}
+