[WIP] Dash dev tools

.babelrc

@@ -1,8 +1,8 @@
 {
-    "presets": ["es2015", "react"],
+    "presets": ["es2015", "react", "stage-2"],
     "env": {
         "development": {
-            "presets": ["es2015", "react"],
+            "presets": ["es2015", "react", "stage-2"],
             "plugins": [
                 ["transform-es2015-modules-commonjs-simple", {
                     "noMangle": true

config/eslint/eslintrc-node.json

@@ -1,6 +1,7 @@
 {
     "env": {
-        "node": true
+        "node": true,
+        "browser": true
     },
     "extends": [
         "eslint:recommended",
@@ -15,7 +16,8 @@
         "ecmaVersion": "2015",
         "sourceType": "module",
         "ecmaFeatures": {
-            "jsx": true
+            "jsx": true,
+            "experimentalObjectRestSpread": true
         }
     },
     "rules": {

dash_renderer/__init__.py

@@ -12,7 +12,7 @@
 from .version import __version__
 __file__
 
-_DEFAULT_REACT_VERSION = '15.4.2'
+_DEFAULT_REACT_VERSION = '16.2.0'
 _REACT_VERSION_TYPES = {'15.4.2', '16.2.0'}
 _REACT_VERSION_TO_URLS = {
     '15.4.2': {

dev-requirements.txt

@@ -1,6 +1,6 @@
-dash_core_components==0.12.0
-dash_html_components==0.11.0rc5
-dash==0.18.3
+dash_core_components
+dash_html_components
+dash
 percy
 selenium
 mock

package.json

@@ -19,7 +19,6 @@
   "dependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
@@ -33,22 +32,26 @@
     "query-string": "^4.3.2",
     "radium": "^0.22.0",
     "ramda": "^0.23.0",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-redux": "^4.4.5",
     "redux": "^3.4.0",
     "redux-actions": "^0.9.1",
     "redux-thunk": "^2.0.1",
-    "webpack": "^4.8.3",
-    "webpack-cli": "^2.1.3",
+    "uniqid": "^5.0.3",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
     "webpack-partial": "^1.2.0",
     "webpack-serve": "^1.0.2",
     "whatwg-fetch": "^2.0.2"
   },
   "devDependencies": {
+    "babel-loader": "^7.1.5",
     "babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
     "babel-preset-es2015-webpack": "^6.4.1",
-    "eslint": "^3.15.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^1.0.0",
+    "eslint": "^3.19.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-react": "^6.9.0",
     "react-hot-loader": "^1.3.0",

src/APIController.react.js

@@ -3,6 +3,7 @@ import {contains, isEmpty, isNil} from 'ramda'
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import TreeContainer from './TreeContainer';
+import GlobalErrorContainer from './components/error/GlobalErrorContainer.react';
 import {
     computeGraphs,
     computePaths,
@@ -97,9 +98,9 @@ class UnconnectedContainer extends Component {
 
         else if (appLifecycle === APP_STATES('HYDRATED')) {
             return (
-                <div id="_dash-app-content">
-                    <TreeContainer layout={layout}/>
-                </div>
+              <GlobalErrorContainer>
+                <TreeContainer layout={layout}/>
+              </GlobalErrorContainer>
             );
         }
 
@@ -118,7 +119,8 @@ UnconnectedContainer.propTypes = {
     layoutRequest: PropTypes.object,
     layout: PropTypes.object,
     paths: PropTypes.object,
-    history: PropTypes.array
+    history: PropTypes.array,
+    error: PropTypes.object
 }
 
 const Container = connect(
@@ -130,7 +132,8 @@ const Container = connect(
         layout: state.layout,
         graphs: state.graphs,
         paths: state.paths,
-        history: state.history
+        history: state.history,
+        error: state.error
     }),
     dispatch => ({dispatch})
 )(UnconnectedContainer);

src/TreeContainer.js

@@ -5,6 +5,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import Registry from './registry';
 import NotifyObservers from './components/core/NotifyObservers.react';
+import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react';
 
 export default class TreeContainer extends Component {
     shouldComponentUpdate(nextProps) {
@@ -76,9 +77,13 @@ function render(component) {
     );
 
     return (
-        <NotifyObservers id={componentProps.id}>
-            {parent}
-        </NotifyObservers>
+        <ComponentErrorBoundary
+          componentType={component.type}
+          componentId={componentProps.id}>
+          <NotifyObservers id={componentProps.id}>
+              {parent}
+          </NotifyObservers>
+        </ComponentErrorBoundary>
     );
 }
 

src/actions/api.js

@@ -2,6 +2,9 @@
 import cookie from 'cookie';
 import {merge} from 'ramda';
 import {urlBase} from '../utils';
+import {createAction} from 'redux-actions';
+import {ACTIONS} from './constants';
+export const onError = createAction(ACTIONS('ON_ERROR'));
 
 function GET(path) {
     return fetch(path, {
@@ -69,12 +72,11 @@ function apiThunk(endpoint, method, store, id, body, headers={}) {
             /* eslint-disable no-console */
             console.error(err);
             /* eslint-enable no-console */
-            dispatch({
-                type: store,
-                payload: {
-                    id,
-                    status: 500
-                }
+            err.text().then(text => {
+              dispatch(onError({
+                type: 'backEnd',
+                errorPage: text
+              }))
             });
         });
     };

src/actions/constants.js

@@ -6,7 +6,9 @@ export const ACTIONS = (action) => {
         COMPUTE_PATHS: 'COMPUTE_PATHS',
         SET_LAYOUT: 'SET_LAYOUT',
         SET_APP_LIFECYCLE: 'SET_APP_LIFECYCLE',
-        READ_CONFIG: 'READ_CONFIG'
+        READ_CONFIG: 'READ_CONFIG',
+        ON_ERROR: 'ON_ERROR',
+        RESOLVE_ERROR: 'RESOLVE_ERROR'
     };
     if (actionList[action]) return actionList[action];
     else throw new Error(`${action} is not defined.`)

src/actions/index.js

@@ -39,6 +39,9 @@ export const computePaths = createAction(ACTIONS('COMPUTE_PATHS'));
 export const setLayout = createAction(ACTIONS('SET_LAYOUT'));
 export const setAppLifecycle = createAction(ACTIONS('SET_APP_LIFECYCLE'));
 export const readConfig = createAction(ACTIONS('READ_CONFIG'));
+export const onError = createAction(ACTIONS('ON_ERROR'));
+export const resolveError = createAction(ACTIONS('RESOLVE_ERROR'));
+
 
 export function hydrateInitialOutputs() {
     return function (dispatch, getState) {
@@ -132,6 +135,26 @@ export function undo() {
 }
 
 
+export function revert() {
+    return function (dispatch, getState) {
+        const history = getState().history;
+        dispatch(createAction('REVERT')());
+        const previous = history.past[history.past.length - 1];
+
+        // Update props
+        dispatch(createAction('UNDO_PROP_CHANGE')({
+            itempath: getState().paths[previous.id],
+            props: previous.props
+        }));
+
+        // Notify observers
+        dispatch(notifyObservers({
+            id: previous.id,
+            props: previous.props
+        }));
+    }
+}
+
 
 function reduceInputIds(nodeIds, InputGraph) {
     /*
@@ -403,8 +426,18 @@ function updateOutput(
      * }
      *
      */
+
+     const { type: outputType, namespace: outputNamespace } = view(
+      lensPath(paths[outputComponentId]),
+      layout
+    )
      const payload = {
-         output: {id: outputComponentId, property: outputProp}
+         output: {
+           id: outputComponentId,
+           property: outputProp,
+           type: outputType,
+           namespace: outputNamespace,
+         }
      };
 
      if (event) {
@@ -479,6 +512,10 @@ function updateOutput(
         body: JSON.stringify(payload)
     }).then(function handleResponse(res) {
 
+        if (!res.ok) {
+            throw res;
+        }
+
         const getThisRequestIndex = () => {
             const postRequestQueue = getState().requestQueue;
             const thisRequestIndex = findIndex(
@@ -732,6 +769,13 @@ function updateOutput(
             }
 
         });
+    }).catch(err => {
+      err.text().then(text => {
+        dispatch(onError({
+          type: 'backEnd',
+          errorPage: text
+        }))
+      });
     });
 
 }

src/components/error/ComponentDisabledOverlay.react.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const styles = {
+  root: {
+    position: 'relative'
+  },
+  overlay: {
+    position: 'relative',
+    padding: '2px',
+    backgroundColor: 'rgb(0, 0, 255, .5)',
+    border: '1px solid black',
+    borderRadius: '2px',
+    display: 'inline-block'
+  },
+  childWrapper: {
+    position: 'relative',
+    zIndex: -1
+  }
+}
+
+function ComponentDisabledOverlay({ children }) {
+  return (
+    <div style={styles.root}>
+      <div
+        style={styles.overlay}>
+        <div style={styles.childWrapper}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ComponentDisabledOverlay.propTypes = {
+    children: PropTypes.object,
+}
+
+export default ComponentDisabledOverlay;