Improve Callback Graph

CHANGELOG.md

@@ -6,6 +6,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ### Fixed
 - [#1384](https://github.com/plotly/dash/pull/1384) Fixed a bug introduced by [#1180](https://github.com/plotly/dash/pull/1180) breaking use of `prevent_initial_call` as a positional arg in callback definitions
 
+### Changed
+-  [#1179](https://github.com/plotly/dash/pull/1179) New and improved callback graph in the debug menu. Now based on Cytoscape for much more interactivity, plus callback profiling including number of calls, fine-grained time information, bytes sent and received, and more. You can even add custom timing information on the server with `callback_context.record_timing(name, seconds)`
+
 ## [1.15.0] - 2020-08-25
 ### Added
 - [#1355](https://github.com/plotly/dash/pull/1355) Removed redundant log message and consolidated logger initialization. You can now control the log level - for example suppress informational messages from Dash with `app.logger.setLevel(logging.WARNING)`.

dash-renderer/.prettierrc

@@ -1,6 +1,7 @@
 {
     "tabWidth": 4,
     "singleQuote": true,
+    "jsxSingleQuote": true,
     "bracketSpacing": false,
-    "trailingComma": "es5"
-}
+    "trailingComma": "none"
+}

dash-renderer/package.json

@@ -6,10 +6,10 @@
   "scripts": {
     "prepublishOnly": "rm -rf lib && babel src --extensions=\".ts,.tsx,.js,.jsx\" --out-dir lib --copy-files",
     "private::format.js-eslint": "eslint --quiet --fix .",
-    "private::format.js-prettier": "prettier --config .prettierrc --write \"src/**/*.js\"",
+    "private::format.js-prettier": "prettier --config .prettierrc --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "private::format.ts": "tslint --fix --project tsconfig.json --config tslint.json",
     "private::lint.js-eslint": "eslint .",
-    "private::lint.js-prettier": "prettier --config .prettierrc \"src/**/*.js\" --list-different",
+    "private::lint.js-prettier": "prettier --config .prettierrc \"src/**/*.{js,jsx,ts,tsx}\" --list-different",
     "private::lint.ts": "tslint --project tsconfig.json --config tslint.json",
     "build:js": "webpack --build release",
     "build:dev": "webpack --build local",
@@ -27,18 +27,21 @@
     "@babel/polyfill": "7.8.7",
     "@plotly/dash-component-plugins": "^1.2.0",
     "cookie": "^0.4.0",
+    "cytoscape": "^3.14.1",
+    "cytoscape-dagre": "^2.2.2",
     "dependency-graph": "^0.9.0",
     "fast-isnumeric": "^1.1.3",
     "prop-types": "15.7.2",
     "radium": "^0.26.0",
     "ramda": "^0.27.0",
     "react": "16.13.0",
+    "react-cytoscapejs": "^1.2.1",
     "react-dom": "16.13.0",
+    "react-json-tree": "^0.11.2",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
-    "redux-thunk": "^2.3.0",
-    "viz.js": "2.1.2"
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.3",
@@ -75,6 +78,7 @@
     "ts-jest": "^26.0.0",
     "ts-loader": "^7.0.2",
     "tslint": "^6.1.2",
+    "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.8.3",
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",

dash-renderer/src/APIController.react.js

@@ -10,7 +10,7 @@ import {
     onError,
     setGraphs,
     setPaths,
-    setLayout,
+    setLayout
 } from './actions';
 import {computePaths} from './actions/paths';
 import {computeGraphs} from './actions/dependencies';
@@ -36,7 +36,7 @@ const UnconnectedContainer = props => {
         error,
         layoutRequest,
         layout,
-        loadingMap,
+        loadingMap
     } = props;
 
     const [errorLoading, setErrorLoading] = useState(false);
@@ -55,8 +55,8 @@ const UnconnectedContainer = props => {
             _dashprivate_config: propsRef.current.config,
             _dashprivate_dispatch: propsRef.current.dispatch,
             _dashprivate_graphs: propsRef.current.graphs,
-            _dashprivate_loadingMap: propsRef.current.loadingMap,
-        }),
+            _dashprivate_loadingMap: propsRef.current.loadingMap
+        })
     });
 
     useEffect(storeEffect.bind(null, props, events, setErrorLoading));
@@ -73,13 +73,13 @@ const UnconnectedContainer = props => {
         layoutRequest.status &&
         !includes(layoutRequest.status, [STATUS.OK, 'loading'])
     ) {
-        content = <div className="_dash-error">Error loading layout</div>;
+        content = <div className='_dash-error'>Error loading layout</div>;
     } else if (
         errorLoading ||
         (dependenciesRequest.status &&
             !includes(dependenciesRequest.status, [STATUS.OK, 'loading']))
     ) {
-        content = <div className="_dash-error">Error loading dependencies</div>;
+        content = <div className='_dash-error'>Error loading dependencies</div>;
     } else if (appLifecycle === getAppState('HYDRATED')) {
         renderedTree.current = true;
 
@@ -102,7 +102,7 @@ const UnconnectedContainer = props => {
             </DashContext.Provider>
         );
     } else {
-        content = <div className="_dash-loading">Loading...</div>;
+        content = <div className='_dash-loading'>Loading...</div>;
     }
 
     return config && config.ui === true ? (
@@ -120,7 +120,7 @@ function storeEffect(props, events, setErrorLoading) {
         error,
         graphs,
         layout,
-        layoutRequest,
+        layoutRequest
     } = props;
 
     if (isEmpty(layoutRequest)) {
@@ -180,7 +180,7 @@ function storeEffect(props, events, setErrorLoading) {
 UnconnectedContainer.propTypes = {
     appLifecycle: PropTypes.oneOf([
         getAppState('STARTED'),
-        getAppState('HYDRATED'),
+        getAppState('HYDRATED')
     ]),
     dispatch: PropTypes.func,
     dependenciesRequest: PropTypes.object,
@@ -190,7 +190,7 @@ UnconnectedContainer.propTypes = {
     loadingMap: PropTypes.any,
     history: PropTypes.any,
     error: PropTypes.object,
-    config: PropTypes.object,
+    config: PropTypes.object
 };
 
 const Container = connect(
@@ -204,7 +204,7 @@ const Container = connect(
         graphs: state.graphs,
         history: state.history,
         error: state.error,
-        config: state.config,
+        config: state.config
     }),
     dispatch => ({dispatch})
 )(UnconnectedContainer);

dash-renderer/src/AccessDenied.react.js

@@ -46,6 +46,6 @@ function AccessDenied(props) {
     );
 }
 AccessDenied.propTypes = {
-    config: PropTypes.object,
+    config: PropTypes.object
 };
 export default AccessDenied;