callback dag visualization

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;
+    bottom: 110px;
+    right: 110px;
+    max-width: 80vw;
+    max-height: 80vh;
+    overflow: scroll;
+}

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

@@ -0,0 +1,73 @@
+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 {dependenciesRequest} = this.props;
+        const elements = {};
+        const callbacks = [];
+        const links = dependenciesRequest.content.map(({inputs, output}, i) => {
+            callbacks.push(`cb${i};`);
+            function recordAndReturn([id, property]) {
+                elements[id] = elements[id] || {};
+                elements[id][property] = true;
+                return `"${id}.${property}"`;
+            }
+            const out_nodes = output
+                .replace(/^\.\./, '')
+                .replace(/\.\.$/, '')
+                .split('...')
+                .map(o => recordAndReturn(o.split('.')))
+                .join(', ');
+            const in_nodes = inputs
+                .map(({id, property}) => recordAndReturn([id, property]))
+                .join(', ');
+            return `{${in_nodes}} -> cb${i} -> {${out_nodes}};`;
+        });
+
+        const dot = `digraph G {
+            overlap = false; fontname="Arial"; fontcolor="#333333";
+            edge [color="#888888"];
+            node [shape=box, fontname="Arial", style=filled, color="#109DFF", fontcolor=white];
+            graph [penwidth=0];
+            subgraph callbacks {
+                node [shape=circle, width=0.3, label="", color="#00CC96"];
+                ${callbacks.join('\n')} }
+
+            ${Object.entries(elements)
+                .map(
+                    ([id, props], i) => `
+                subgraph cluster_${i} {
+                    bgcolor="#B9C2CE";
+                    ${Object.keys(props)
+                        .map(p => `"${id}.${p}" [label="${p}"];`)
+                        .join('\n')}
+                    label = "${id}"; }`
+                )
+                .join('\n')}
+
+            ${links.join('\n')} }`;
+
+        return (
+            <div
+                className="dash-callback-dag--container"
+                dangerouslySetInnerHTML={{
+                    __html: viz(dot, {format: 'svg'}),
+                }}
+            />
+        );
+    }
+}
+
+CallbackGraphContainer.propTypes = {
+    dependenciesRequest: PropTypes.object,
+};
+
+export {CallbackGraphContainer};

src/components/error/GlobalErrorContainer.react.js

@@ -20,11 +20,12 @@ class UnconnectedGlobalErrorContainer extends Component {
     }
 
     render() {
-        const {error, dispatch} = this.props;
+        const {error, dispatch, dependenciesRequest} = this.props;
         return (
             <div id="_dash-global-error-container">
                 <DebugMenu
                     error={error}
+                    dependenciesRequest={dependenciesRequest}
                     dispatch={dispatch}
                     resolveError={this.resolveError}
                 >
@@ -38,12 +39,14 @@ class UnconnectedGlobalErrorContainer extends Component {
 UnconnectedGlobalErrorContainer.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,
+    dependenciesRequest: PropTypes.object,
     dispatch: PropTypes.func,
 };
 
 const GlobalErrorContainer = connect(
     state => ({
         error: state.error,
+        dependenciesRequest: state.dependenciesRequest,
     }),
     dispatch => ({dispatch})
 )(Radium(UnconnectedGlobalErrorContainer));

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

@@ -10,6 +10,7 @@ import GraphIcon from '../icons/GraphIcon.svg';
 import PropTypes from 'prop-types';
 import {DebugAlertContainer} from './DebugAlertContainer.react';
 import GlobalErrorOverlay from '../GlobalErrorOverlay.react';
+import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
 
 class DebugMenu extends Component {
     constructor(props) {
@@ -18,19 +19,30 @@ class DebugMenu extends Component {
         this.state = {
             opened: false,
             alertsOpened: false,
+            callbackGraphOpened: false,
             toastsEnabled: true,
         };
     }
     render() {
-        const {opened, alertsOpened, toastsEnabled} = this.state;
-        const {error, resolveError, dispatch} = this.props;
+        const {
+            opened,
+            alertsOpened,
+            toastsEnabled,
+            callbackGraphOpened,
+        } = this.state;
+        const {error, resolveError, dispatch, dependenciesRequest} = this.props;
 
         const menuClasses = opened
             ? 'dash-debug-menu dash-debug-menu--opened'
             : 'dash-debug-menu dash-debug-menu--closed';
 
         const menuContent = opened ? (
             <div className="dash-debug-menu__content">
+                {callbackGraphOpened ? (
+                    <CallbackGraphContainer
+                        dependenciesRequest={dependenciesRequest}
+                    />
+                ) : null}
                 {error.frontEnd.length > 0 || error.backEnd.length > 0 ? (
                     <div className="dash-debug-menu__button-container">
                         <DebugAlertContainer
@@ -43,7 +55,14 @@ 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">
@@ -125,6 +144,7 @@ class DebugMenu extends Component {
 DebugMenu.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,
+    dependenciesRequest: PropTypes.object,
     resolveError: PropTypes.function,
     dispatch: PropTypes.function,
 };