Improve Callback Graph

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Changed
 - [#1385](https://github.com/plotly/dash/pull/1385) Closes [#1350](https://github.com/plotly/dash/issues/1350) and fixes a previously undefined callback behavior when multiple elements are stacked on top of one another and their `n_clicks` props are used as inputs of the same callback. The callback will now trigger once with all the triggered `n_clicks` props changes.
+- [#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)`
 
 ### 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
@@ -21,7 +22,6 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#1180](https://github.com/plotly/dash/pull/1180) and [#1375](https://github.com/plotly/dash/pull/1375) `Input`, `Output`, and `State` in callback definitions don't need to be in lists. You still need to provide `Output` items first, then `Input` items, then `State`, and the list form is still supported. In particular, if you want to return a single output item wrapped in a length-1 list, you should still wrap the `Output` in a list. This can be useful for procedurally-generated callbacks.
 - [#1368](https://github.com/plotly/dash/pull/1368) Updated pytest to v6.0.1. To avoid deprecation warnings, this also updated pytest-sugar to 0.9.4 and pytest-mock to 3.2.0. The pytest-mock update only effects python >= 3.0. Pytest-mock remains pinned at 2.0.0 for python == 2.7.
 
-
 ## [1.14.0] - 2020-07-27
 ### Added
 - [#1343](https://github.com/plotly/dash/pull/1343) Add `title` parameter to set the

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';
@@ -37,7 +37,7 @@ const UnconnectedContainer = props => {
         error,
         layoutRequest,
         layout,
-        loadingMap,
+        loadingMap
     } = props;
 
     const [errorLoading, setErrorLoading] = useState(false);
@@ -56,8 +56,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));
@@ -77,13 +77,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;
 
@@ -106,7 +106,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 ? (
@@ -124,7 +124,7 @@ function storeEffect(props, events, setErrorLoading) {
         error,
         graphs,
         layout,
-        layoutRequest,
+        layoutRequest
     } = props;
 
     if (isEmpty(layoutRequest)) {
@@ -184,7 +184,7 @@ function storeEffect(props, events, setErrorLoading) {
 UnconnectedContainer.propTypes = {
     appLifecycle: PropTypes.oneOf([
         getAppState('STARTED'),
-        getAppState('HYDRATED'),
+        getAppState('HYDRATED')
     ]),
     dispatch: PropTypes.func,
     dependenciesRequest: PropTypes.object,
@@ -194,7 +194,7 @@ UnconnectedContainer.propTypes = {
     loadingMap: PropTypes.any,
     history: PropTypes.any,
     error: PropTypes.object,
-    config: PropTypes.object,
+    config: PropTypes.object
 };
 
 const Container = connect(
@@ -208,7 +208,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;