update viz.js and redux-thunk usage (#1174)

Author: Marc-Andre-Rivet

dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js

@@ -1,15 +1,34 @@
 import React, {Component} from 'react';
 import './CallbackGraphContainer.css';
 
-import viz from 'viz.js';
+import Viz from 'viz.js';
+import {Module, render} from 'viz.js/full.render';
 
 import PropTypes from 'prop-types';
 
 class CallbackGraphContainer extends Component {
     constructor(props) {
         super(props);
+
+        this.viz = null;
+        this.updateViz = this.updateViz.bind(this);
+    }
+
+    componentDidMount() {
+        this.updateViz();
+    }
+
+    componentDidUpdate() {
+        this.updateViz();
     }
+
     render() {
+        return <div className="dash-callback-dag--container" ref="el" />;
+    }
+
+    updateViz() {
+        this.viz = this.viz || new Viz({Module, render});
+
         const {dependenciesRequest} = this.props;
         const elements = {};
         const callbacks = [];
@@ -55,14 +74,21 @@ class CallbackGraphContainer extends Component {
 
             ${links.join('\n')} }`;
 
-        return (
-            <div
-                className="dash-callback-dag--container"
-                dangerouslySetInnerHTML={{
-                    __html: viz(dot, {format: 'svg'}),
-                }}
-            />
-        );
+        const el = this.refs.el;
+
+        this.viz
+            .renderSVGElement(dot)
+            .then(vizEl => {
+                el.innerHTML = '';
+                el.appendChild(vizEl);
+            })
+            .catch(e => {
+                // https://github.com/mdaines/viz.js/wiki/Caveats
+                this.viz = new Viz({Module, render});
+                // eslint-disable-next-line no-console
+                console.error(e);
+                el.innerHTML = 'Error creating callback graph';
+            });
     }
 }
 

dash-renderer/src/store.js

@@ -19,16 +19,18 @@ const initializeStore = reset => {
 
     const reducer = createReducer();
 
-    // only attach logger to middleware in non-production mode
-    store =
-        process.env.NODE_ENV === 'production' // eslint-disable-line no-process-env
-            ? createStore(reducer, applyMiddleware(thunk))
-            : createStore(
-                  reducer,
-                  window.__REDUX_DEVTOOLS_EXTENSION__ &&
-                      window.__REDUX_DEVTOOLS_EXTENSION__(),
-                  applyMiddleware(thunk)
-              );
+    // eslint-disable-next-line no-process-env
+    if (process.env.NODE_ENV === 'production') {
+        store = createStore(reducer, applyMiddleware(thunk));
+    } else {
+        // only attach logger to middleware in non-production mode
+        const reduxDTEC = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
+        if (reduxDTEC) {
+            store = createStore(reducer, reduxDTEC(applyMiddleware(thunk)));
+        } else {
+            store = createStore(reducer, applyMiddleware(thunk));
+        }
+    }
 
     if (!reset) {
         // TODO - Protect this under a debug mode?