Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64

Closed
rmarren1 wants to merge 35 commits into from
Closed

[WIP] Dash dev tools #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
eb7f935
Dash dev tools -- frontend
rmarren1 Jul 29, 2018
605b585
Eslint error fixes.
rmarren1 Jul 30, 2018
e3d4d6a
Catch Werkzueg errors in front-end and display.
rmarren1 Aug 2, 2018
3758ca2
Error boundary around each component.
rmarren1 Aug 2, 2018
43093e8
Get rid of eslint complaints
rmarren1 Aug 3, 2018
01b64ed
Werkzueg embed with console working
rmarren1 Aug 3, 2018
ffdad09
Expandable error boundaries
rmarren1 Aug 3, 2018
4409102
Error component overlay and resolve.
rmarren1 Aug 8, 2018
15e03a2
Revert changes when resolved.
rmarren1 Aug 9, 2018
9b29a74
Updates to pass testing.
rmarren1 Aug 10, 2018
09f32a6
Add 'namespace' and 'type' props to _dash_update_component payload.
rmarren1 Aug 21, 2018
11ae9b3
Merge branch 'validate' into dash-dev-tools
rmarren1 Aug 27, 2018
1653474
Rebase on master
rmarren1 Oct 3, 2018
87fd0e3
Update webpack
rmarren1 Oct 3, 2018
375fdcd
Update Dash ecosystem requirements to latest
rmarren1 Oct 3, 2018
418f46b
Fix html raw comparison test
rmarren1 Oct 3, 2018
e0486eb
Add n_clicks, n_clicks_timestamp to raw HTML comparisons
rmarren1 Oct 3, 2018
12973a3
Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…
rmarren1 Oct 3, 2018
b94c026
Add css-loader
rmarren1 Oct 4, 2018
2954c8c
Add sample werkzueg.css file
rmarren1 Oct 4, 2018
e14a259
Re-build renderer
rmarren1 Oct 4, 2018
8e80bdb
Replace werkzueg.css with default
rmarren1 Oct 4, 2018
2fec382
Add frontEnd / backEnd error state to redux.
rmarren1 Oct 5, 2018
b6e2b5f
Fix 'UNDO' error.
rmarren1 Oct 10, 2018
89c5cae
Add ComponentDisabledOverlay
rmarren1 Oct 10, 2018
e60ed0a
Include component `id` and `UID` in store.
rmarren1 Oct 10, 2018
e266c33
Remove old children from Error Overlay.
rmarren1 Oct 10, 2018
1bdb9ea
Change myId -> myUID
rmarren1 Oct 10, 2018
6c644fc
Add Global error menu.
rmarren1 Oct 10, 2018
1fc8879
Work in disabled overlay.
rmarren1 Oct 10, 2018
4785896
Re-build dev bundle.
rmarren1 Oct 10, 2018
f2bdd45
Eslint fixex.
rmarren1 Oct 10, 2018
0916d24
Add more informative `_dash-` ids to each component.
rmarren1 Oct 10, 2018
5bce957
Delete test.py
rmarren1 Oct 10, 2018
29a9ea3
Track old children state in ComponentBoundary.
rmarren1 Oct 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .babelrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
Expand Down
6 changes: 4 additions & 2 deletions config/eslint/eslintrc-node.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
"env": {
"node": true
"node": true,
"browser": true
},
"extends": [
"eslint:recommended",
Expand All@@ -15,7 +16,8 @@
"ecmaVersion": "2015",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"rules": {
Expand Down
2 changes: 1 addition & 1 deletion dash_renderer/__init__.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down
180 changes: 148 additions & 32 deletions dash_renderer/dash_renderer.dev.js
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions dash_renderer/dash_renderer.min.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dev-requirements.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
Expand Down
7,016 changes: 2,664 additions & 4,352 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 9 additions & 6 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down
13 changes: 8 additions & 5 deletions src/APIController.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
);
}

Expand All@@ -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(
Expand All@@ -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);
Expand Down
11 changes: 8 additions & 3 deletions src/TreeContainer.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
);
}

Expand Down
14 changes: 8 additions & 6 deletions src/actions/api.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
}))
});
});
};
Expand Down
4 changes: 3 additions & 1 deletion src/actions/constants.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down
46 changes: 45 additions & 1 deletion src/actions/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
/*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
}

});
}).catch(err => {
err.text().then(text => {
dispatch(onError({
type: 'backEnd',
errorPage: text
}))
});
});

}
Expand Down
39 changes: 39 additions & 0 deletions src/components/error/ComponentDisabledOverlay.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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;
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
[WIP] Dash dev tools by rmarren1 · Pull Request #64 · plotly/dash-renderer · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

[WIP] Dash dev tools#64
 Closed

rmarren1
wants to merge
35
commits into

from

 Closed


[WIP] Dash dev tools
#64
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


35 commits


Select commit
Hold shift + click to select a range
eb7f935

Dash dev tools -- frontend


rmarren1 Jul 29, 2018
605b585

Eslint error fixes.


rmarren1 Jul 30, 2018
e3d4d6a

Catch Werkzueg errors in front-end and display.


rmarren1 Aug 2, 2018
3758ca2

Error boundary around each component.


rmarren1 Aug 2, 2018
43093e8

Get rid of eslint complaints


rmarren1 Aug 3, 2018
01b64ed

Werkzueg embed with console working


rmarren1 Aug 3, 2018
ffdad09

Expandable error boundaries


rmarren1 Aug 3, 2018
4409102

Error component overlay and resolve.


rmarren1 Aug 8, 2018
15e03a2

Revert changes when resolved.


rmarren1 Aug 9, 2018
9b29a74

Updates to pass testing.


rmarren1 Aug 10, 2018
09f32a6

Add 'namespace' and 'type' props to _dash_update_component payload.


rmarren1 Aug 21, 2018
11ae9b3

Merge branch 'validate' into dash-dev-tools


rmarren1 Aug 27, 2018
1653474

Rebase on master


rmarren1 Oct 3, 2018
87fd0e3

Update webpack


rmarren1 Oct 3, 2018
375fdcd

Update Dash ecosystem requirements to latest


rmarren1 Oct 3, 2018
418f46b

Fix html raw comparison test


rmarren1 Oct 3, 2018
e0486eb

Add n_clicks, n_clicks_timestamp to raw HTML comparisons


rmarren1 Oct 3, 2018
12973a3

Merge branch 'dash-dev-tools' of https://github.com/rmarren1/dash-ren…


rmarren1 Oct 3, 2018
b94c026

Add css-loader


rmarren1 Oct 4, 2018
2954c8c

Add sample werkzueg.css file


rmarren1 Oct 4, 2018
e14a259

Re-build renderer


rmarren1 Oct 4, 2018
8e80bdb

Replace werkzueg.css with default


rmarren1 Oct 4, 2018
2fec382

Add frontEnd / backEnd error state to redux.


rmarren1 Oct 5, 2018
b6e2b5f

Fix 'UNDO' error.


rmarren1 Oct 10, 2018
89c5cae

Add ComponentDisabledOverlay


rmarren1 Oct 10, 2018
e60ed0a

Include component `id` and `UID` in store.


rmarren1 Oct 10, 2018
e266c33

Remove old children from Error Overlay.


rmarren1 Oct 10, 2018
1bdb9ea

Change myId -> myUID


rmarren1 Oct 10, 2018
6c644fc

Add Global error menu.


rmarren1 Oct 10, 2018
1fc8879

Work in disabled overlay.


rmarren1 Oct 10, 2018
4785896

Re-build dev bundle.


rmarren1 Oct 10, 2018
f2bdd45

Eslint fixex.


rmarren1 Oct 10, 2018
0916d24

Add more informative `_dash-` ids to each component.


rmarren1 Oct 10, 2018
5bce957

Delete test.py


rmarren1 Oct 10, 2018
29a9ea3

Track old children state in ComponentBoundary.


rmarren1 Oct 12, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
.babelrc

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

6 changes: 4 additions & 2 deletions
config/eslint/eslintrc-node.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
{
 "env": {
 "node": true
 "node": true,
 "browser": true
 },
 "extends": [
 "eslint:recommended",
Expand All@@ -15,7 +16,8 @@
 "ecmaVersion": "2015",
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
 "jsx": true,
 "experimentalObjectRestSpread": true
 }
 },
 "rules": {
Expand Down

2 changes: 1 addition & 1 deletion
dash_renderer/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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': {
Expand Down

180 changes: 148 additions & 32 deletions
dash_renderer/dash_renderer.dev.js

View file


Open in desktop


Large diffs are not rendered by default.


12 changes: 6 additions & 6 deletions
dash_renderer/dash_renderer.min.js

View file


Open in desktop


Large diffs are not rendered by default.


6 changes: 3 additions & 3 deletions
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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
Expand Down

7,016 changes: 2,664 additions & 4,352 deletions
package-lock.json

View file


Open in desktop


Large diffs are not rendered by default.


15 changes: 9 additions & 6 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand All@@ -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",
Expand Down

13 changes: 8 additions & 5 deletions
src/APIController.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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>
 );
 }

Expand All@@ -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(
Expand All@@ -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);
Expand Down

11 changes: 8 additions & 3 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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>
 );
}

Expand Down

14 changes: 8 additions & 6 deletions
src/actions/api.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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, {
Expand DownExpand Up@@ -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
 }))
 });
 });
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/actions/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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.`)
Expand Down

46 changes: 45 additions & 1 deletion
src/actions/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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) {
 /*
Expand DownExpand Up@@ -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) {
Expand DownExpand Up@@ -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(
Expand DownExpand Up@@ -732,6 +769,13 @@ function updateOutput(
 }

 });
 }).catch(err => {
 err.text().then(text => {
 dispatch(onError({
 type: 'backEnd',
 errorPage: text
 }))
 });
 });

}
Expand Down

39 changes: 39 additions & 0 deletions
src/components/error/ComponentDisabledOverlay.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
Loading