[WIP] Dash dev tools

[rmarren1]

Release Candidate: pip install dash-renderer==0.14.0rc7
In this PR, we change the Dash app layout from something like:

<div id="react-entry-point">
  <div id="_dash-undo-redo">...</div>
  <div id="_dash-app-content">
    ...
    <SomeDashComponent />
    ...
  </div>
</div>

To the following

<div id="react-entry-point">
  <div id="_dash-undo-redo">...</div>
  <GlobalErrorContainer>
    <GlobalErrorOverlay>
      <div id="_dash-app-content">
        ...
        <ComponentErrorBoundary>
          <SomeDashComponent /> OR <ComponentErrorOverlay><SomeDashComponent /></ComponentErrorOverlay> OR <ComponentDisabledOverlay><SomeDashComponent /></ComponentDisabledOverlay>
        </ ComponentErrorBoundary>
        ...
      </div>
    </ GlobalErrorOverlay>
  </ GlobalErrorContainer>
</div>

The new components serve the following purposes:

• GlobalErrorContainer -- Container for the GlobalErrorOverlay, this component connects to the Redux store and passes state and functions down to the GlobalErrorOverlay, and also creates the Werkzueg error pop-up.
• GlobalErrorOverlay -- This component renders the main Dash app (_dash-app-content) along side a conditionally rendered 'error menu'.
• ComponentErrorBoundary -- This component wraps each Dash component in the TreeContainer and implements the componentDidCatch lifecycle method to catch errors in those Dash components. If there is an error in the component, a ComponentErrorOverlay component is displayed. If the component must be disabled (this component has a child in the callback graph that has an error) a ComponentDisabledOverlay component is displayed.

This PR also makes an update to the Redux store, adding an error state that looks like the following:

{
  ...,
  error : {
    frontEnd: [ { myUID: 'fjdsa89r32',
                       myID: 'button',
                       error: <javascript error object>,
                       info: <javascript info object> } ],
    backEnd: { errorPage: "...the html werkzueg page..."}
 }
  ...
}

[rmarren1]

Looks like you can get the route prefixes from the config like this:

dash-renderer/src/actions/api.js

Line 42 in 0dc6f33

return request[method](`${urlBase(config)}${endpoint}`, body, headers)

anyone know how to actually import the config object? It looks like it is passed down through props to react components, e.g.

dash-renderer/src/AccessDenied.react.js

Line 9 in 0dc6f33

const {config} = props;

, but I can't find where it originates.

[T4rk1n]

@rmarren1 I think it's in the state

dash-renderer/src/actions/api.js

Line 36 in 0dc6f33

const config = getState().config;

Or you can get it directly:

JSON.parse(document.getElementById('_dash-config').textContent)

[rmarren1]

Another pre-release at dash-renderer==0.14.0-rc2 with

• Components covered in red when bugs are encountered, click on component to revert previous interaction and try again
• Werkzueg error pops out in a separate window and Dash app is covered in red, click button to revert previous interaction and try again

[T4rk1n]

I am getting a blank screen when I try it with dash_table_experiments:

This is the console log:

Uncaught TypeError: Cannot read property 'object' of undefined
    at bundle.js:7
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (bundle.js:7)
    at t (bundle.js:1)
    at Object.<anonymous> (bundle.js:1)
    at t (bundle.js:1)
    at bundle.js:1
    at bundle.js:1
[email protected]:162 Error: dash_table_experiments was not found.
    at Object.resolve (bundle.js:14)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
h @ [email protected]:162
bundle.js:2 Error: dash_table_experiments was not found.
    at Object.resolve (bundle.js:14)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
(anonymous) @ bundle.js:2
bundle.js:2 Uncaught (in promise) TypeError: t.text is not a function
    at bundle.js:2

Can you do a release candidate with the dev build ?

[rmarren1]

Yes I'll do that. Pretty sure that your error is because dash-table-experiments is written using in React 15 syntax, I think the only major difference is here you would need to import PropTypes from 'prop-types'; instead.

[T4rk1n]

That make senses.

[rmarren1]

dash-renderer==0.14.0-rc3 is up with dev build and working unpkg link. Should be good as long as all components you are using support react 16 (so far this just means import PropTypes from 'prop-types')

[rmarren1]

Requires this PR: #67

[rmarren1]

plotly/dash-dangerously-set-inner-html#4

[rmarren1]

Just came across this: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

This would make for some annoying errors in tests that try to exactly match the rendered HTML to a string. I think this would affect dash, I'll look at the other repos aswell.

[valentijnnieman]

Hey @rmarren1 - I'm going to start on #94 soon, and was planning on creating a branch off of this branch. Should we fix the merge conflicts first, i.e. rebase, or is that too much work?

Alternatively, I can branch off of this branch, when I'm done we'll merge my branch into this one, and fix the conflicts later.

[rmarren1]

Continued in #100