diff --git a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js index f2a0dacd1a..dad103f5e9 100644 --- a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js +++ b/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
; + } + + 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 ( - - ); + 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'; + }); } } diff --git a/dash-renderer/src/store.js b/dash-renderer/src/store.js index 13b4d43a3f..fc9fa7f465 100644 --- a/dash-renderer/src/store.js +++ b/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?