rough-in of callback chain vis

package.json

@@ -45,6 +45,7 @@
     "redux-actions": "^0.9.1",
     "redux-thunk": "^2.0.1",
     "uniqid": "^5.0.3",
+    "viz.js": "1.8.0",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2",
     "webpack-partial": "^1.2.0",

src/components/error/CallbackGraph/CallbackGraphContainer.css

@@ -0,0 +1,8 @@
+.dash-callback-dag--container {
+  position: absolute;
+  height: 400px;
+  width: 400px;
+  bottom: 150px;
+  right: 100px;
+  background-color: bisque;
+}

src/components/error/CallbackGraph/CallbackGraphContainer.react.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import './CallbackGraphContainer.css';
+
+import viz from 'viz.js';
+
+import PropTypes from 'prop-types';
+
+class CallbackGraphContainer extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const {graphs} = this.props;
+        const edges = graphs.InputGraph.outgoingEdges;
+        const dot_graph = Object.entries(edges)
+            .map(([from, toList]) =>
+                toList.map(to => `"${from}" -> "${to}";`).join('\n')
+            )
+            .join('\n');
+
+        return (
+            <div
+                className="dash-callback-dag--container"
+                dangerouslySetInnerHTML={{
+                    __html: viz(`digraph G { ${dot_graph} }`, {format: 'svg'}),
+                }}
+            />
+        );
+    }
+}
+
+CallbackGraphContainer.propTypes = {
+    graphs: PropTypes.object,
+};
+
+export {CallbackGraphContainer};

src/components/error/GlobalErrorContainer.react.js

@@ -22,7 +22,7 @@ class UnconnectedGlobalErrorContainer extends Component {
     }
 
     render() {
-        const {error, dispatch} = this.props;
+        const {error, dispatch, graphs} = this.props;
         if (!isEmpty(error.backEnd)) {
             return (
                 <div className="dash-backend-error">
@@ -37,6 +37,7 @@ class UnconnectedGlobalErrorContainer extends Component {
             <div id="_dash-global-error-container">
                 <DebugMenu
                     errors={error}
+                    graphs={graphs}
                     dispatch={dispatch}
                     resolveError={this.resolveError}
                 >
@@ -50,12 +51,14 @@ class UnconnectedGlobalErrorContainer extends Component {
 UnconnectedGlobalErrorContainer.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,
+    graphs: PropTypes.object,
     dispatch: PropTypes.func,
 };
 
 const GlobalErrorContainer = connect(
     state => ({
         error: state.error,
+        graphs: state.graphs,
     }),
     dispatch => ({dispatch})
 )(Radium(UnconnectedGlobalErrorContainer));

src/components/error/menu/DebugMenu.react.js

@@ -16,6 +16,7 @@ import GlobalErrorOverlay from '../GlobalErrorOverlay.react';
 import {isEmpty} from 'ramda';
 import {FrontEndError} from '../FrontEnd/FrontEndError.react';
 import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
+import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
 
 class DebugMenu extends Component {
     constructor(props) {
@@ -24,12 +25,18 @@ class DebugMenu extends Component {
         this.state = {
             opened: false,
             alertsOpened: false,
+            callbackGraphOpened: false,
             toastsEnabled: true,
         };
     }
     render() {
-        const {opened, alertsOpened, toastsEnabled} = this.state;
-        const {errors, resolveError, dispatch} = this.props;
+        const {
+            opened,
+            alertsOpened,
+            toastsEnabled,
+            callbackGraphOpened,
+        } = this.state;
+        const {errors, resolveError, dispatch, graphs} = this.props;
 
         const menuClasses = opened
             ? 'dash-debug-menu dash-debug-menu--opened'
@@ -61,9 +68,14 @@ class DebugMenu extends Component {
             }
         }
 
+        const callbackGraph = callbackGraphOpened ? (
+            <CallbackGraphContainer graphs={graphs} />
+        ) : null;
+
         const menuContent = opened ? (
             <div className="dash-debug-menu__content">
                 {frontEndErrors}
+                {callbackGraph}
                 {errors.frontEnd.length > 0 ? (
                     <div className="dash-debug-menu__button-container">
                         <DebugAlertContainer
@@ -76,7 +88,12 @@ class DebugMenu extends Component {
                     </div>
                 ) : null}
                 <div className="dash-debug-menu__button-container">
-                    <div className="dash-debug-menu__button">
+                    <div className="dash-debug-menu__button"
+                        onClick={() =>
+                            this.setState({
+                                callbackGraphOpened: !callbackGraphOpened,
+                            })
+                        }>
                         <GraphIcon className="dash-debug-menu__icon dash-debug-menu__icon--graph" />
                     </div>
                     <label className="dash-debug-menu__button-label">
@@ -171,6 +188,7 @@ class DebugMenu extends Component {
 DebugMenu.propTypes = {
     children: PropTypes.object,
     errors: PropTypes.object,
+    graphs: PropTypes.object,
     resolveError: PropTypes.function,
     dispatch: PropTypes.function,
 };