Loading states api

simple.py

@@ -1,23 +1,171 @@
-from dash import Dash
+# -*- coding: utf-8 -*-
 import dash
 import dash_html_components as html
 import dash_core_components as dcc
+import plotly.graph_objs as go
+import time
 
-app = Dash(__name__)
-app.scripts.config.serve_locally=True
-app.layout = html.Div([
-    dcc.Input(id='my-input', value='initial-input'),
-    html.Div(id='my-output')
-])
+from dash.dependencies import Input, Output, State
 
+external_stylesheets = ["https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"]
 
-@app.callback(
-    dash.dependencies.Output('my-output', 'children'),
-    [dash.dependencies.Input('my-input', 'value')]
-)
-def update(value):
-    return 'Output: {}'.format(value)
+app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
 
+card_style = {
+    "box-shadow": "0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3)"
+}
 
-if __name__ == '__main__':
+card_style_greyed = {
+    "box-shadow": "0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3)",
+    "backgroundColor": "#e0e0e0",
+}
+
+app.scripts.config.serve_locally = True
+
+app.layout = dcc.Loading(children=[html.Div(
+    className="sans-serif",
+    children=[
+        html.Div(
+            [
+                html.H1(
+                    className="tc f1 hot-pink mv6", children=["Dash Loading States API"]
+                )
+            ]
+        ),
+        html.Div(
+            className="w-60 center pt4",
+            children=[
+                dcc.Tabs(
+                    id="tabs",
+                    value="tab-1",
+                    children=[
+                        dcc.Tab(label="Normal Graph", value="tab-1", style={'backgroundColor': '#f5f5f5'}),
+                        dcc.Tab(label="Funky Graph", value="tab-2", style={'backgroundColor': '#f5f5f5'}),
+                    ],
+                    colors={
+                        "primary": "white",
+                        "background": "white",
+                        "border": "#d2d2d2",
+                    },
+                    parent_style=card_style,
+                ),
+                html.Div(
+                    style={
+                        "border": "1px solid #d2d2d2",
+                        "borderTop": "none",
+                        "paddingTop": "32px",
+                        "box-shadow": "0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3)",
+                        "marginTop": "32px",
+                        "height": "498px"
+                    },
+                    children=[
+                        dcc.Loading(id='tabs-content', type='graph')
+                    ]
+                ),
+            ],
+            style={},
+        ),
+        html.Div(
+            className="w-80 center",
+            children=[
+                dcc.Loading(id='output-1')
+            ],
+        ),
+        html.Div(
+            className="w-80 center",
+            children=[
+                dcc.Input(
+                    className="db center mv4 ph2 pv1", id="input-1", value="Type here!"
+                )
+            ],
+        ),
+    ],
+)], type='cube', fullscreen=True)
+
+
+@app.callback(Output('tabs-content', 'children'),
+              [Input('tabs', 'value')])
+def render_content(tab):
+    time.sleep(2)
+    if tab == 'tab-1':
+        return html.Div(id='loading-1', children=[
+            dcc.Graph(
+                id='graph-2-tabs',
+                figure=go.Figure(
+                    data=[
+                        go.Bar(
+                            x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
+                            2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
+                            y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
+                            350, 430, 474, 526, 488, 537, 500, 439],
+                            name='Rest of world',
+                            marker=go.bar.Marker(
+                                color='rgb(55, 83, 109)'
+                            )
+                        ),
+                        go.Bar(
+                            x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
+                            2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
+                            y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
+                            299, 340, 403, 549, 499],
+                            name='China',
+                            marker=go.bar.Marker(
+                                color='rgb(26, 118, 255)'
+                            )
+                        )
+                    ],
+                    layout=go.Layout(
+                        title='US Export of Plastic Scrap',
+                        showlegend=True,
+                        legend=go.layout.Legend(
+                            x=0,
+                            y=1.0
+                        ),
+                        margin=go.layout.Margin(l=40, r=0, t=40, b=30)
+                    )
+                ),
+            )
+        ])
+    elif tab == 'tab-2':
+        return html.Div(id='loading-2', children=[
+            dcc.Graph(
+                id='graph-1-tabs',
+                figure=go.Figure(
+                    data=[
+                        go.Bar(
+                            x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
+                            2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
+                            y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
+                            350, 430, 474, 526, 488, 537, 500, 439],
+                            name='Rest of world',
+                            marker=go.bar.Marker(
+                                color='hotpink'
+                            )
+                        ),
+                        go.Bar(
+                            x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
+                            2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
+                            y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
+                            299, 340, 403, 549, 499],
+                            name='China',
+                            marker=go.bar.Marker(
+                                color='gold'
+                            )
+                        )
+                    ],
+                    layout=go.Layout(
+                        title='US Export of Plastic Scrap',
+                        showlegend=True,
+                        legend=go.layout.Legend(
+                            x=0,
+                            y=1.0
+                        ),
+                        margin=go.layout.Margin(l=40, r=0, t=40, b=30)
+                    )
+                ),
+            )
+        ])
+
+
+if __name__ == "__main__":
     app.run_server(debug=True)

src/APIController.react.js

@@ -73,15 +73,13 @@ class UnconnectedContainer extends Component {
             dispatch(hydrateInitialOutputs());
         }
     }
-
     render() {
         const {
             appLifecycle,
             dependenciesRequest,
             layoutRequest,
             layout,
         } = this.props;
-
         if (
             layoutRequest.status &&
             !contains(layoutRequest.status, [STATUS.OK, 'loading'])
@@ -99,12 +97,22 @@ class UnconnectedContainer extends Component {
         } else if (appLifecycle === getAppState('HYDRATED')) {
             return (
                 <div id="_dash-app-content">
-                    <TreeContainer layout={layout} />
+                    <TreeContainer layout={layout} loading={false} />
                 </div>
             );
         }
-
-        return <div className="_dash-loading">{'Loading...'}</div>;
+        if (isEmpty(layout)) {
+            return (
+                <div id="_dash-app-content">
+                    <TreeContainer layout={layout} loading={true} />
+                </div>
+            );
+        }
+        return (
+            <div id="_dash-app-content">
+                <TreeContainer layout={layout} loading={true} />
+            </div>
+        );
     }
 }
 UnconnectedContainer.propTypes = {

src/TreeContainer.js

@@ -12,21 +12,26 @@ export default class TreeContainer extends Component {
     }
 
     render() {
-        return render(this.props.layout);
+        return recursivelyRender(this.props.layout, this.props.loading);
     }
 }
 
 TreeContainer.propTypes = {
     layout: PropTypes.object,
+    loading: PropTypes.bool
 };
 
-function render(component) {
+function recursivelyRender(component, loading = false) {
     if (
         R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
     ) {
         return component;
     }
 
+    if(R.isEmpty(component)) {
+        return null;
+    }
+
     // Create list of child elements
     let children;
 
@@ -55,7 +60,9 @@ function render(component) {
         children = (Array.isArray(componentProps.children)
             ? componentProps.children
             : [componentProps.children]
-        ).map(render);
+        ).map(child => {
+            return recursivelyRender(child, loading);
+        });
     }
 
     if (!component.type) {
@@ -78,9 +85,9 @@ function render(component) {
         ...children
     );
 
-    return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
+    return <NotifyObservers id={componentProps.id} loading={loading}>{parent}</NotifyObservers>;
 }
 
-render.propTypes = {
+recursivelyRender.propTypes = {
     children: PropTypes.object,
 };

src/components/core/NotifyObservers.react.js

@@ -1,8 +1,9 @@
 import {connect} from 'react-redux';
-import {isEmpty} from 'ramda';
+import {contains, isEmpty} from 'ramda';
 import {notifyObservers, updateProps} from '../../actions';
 import React from 'react';
 import PropTypes from 'prop-types';
+import {STATUS} from '../../constants/constants';
 
 /*
  * NotifyObservers passes a connected `setProps` handler down to
@@ -13,6 +14,7 @@ function mapStateToProps(state) {
     return {
         dependencies: state.dependenciesRequest.content,
         paths: state.paths,
+        requestQueue: state.requestQueue,
     };
 }
 
@@ -27,6 +29,8 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
         children: ownProps.children,
         dependencies: stateProps.dependencies,
         paths: stateProps.paths,
+        loading: ownProps.loading,
+        requestQueue: stateProps.requestQueue,
 
         fireEvent: function fireEvent({event}) {
             // Update this component's observers with the updated props
@@ -56,9 +60,30 @@ function NotifyObserversComponent({
 
     dependencies,
 
+    loading,
+
     fireEvent,
     setProps,
+    requestQueue,
 }) {
+    // loading prop coming from TreeContainer
+    let isLoading = loading;
+    let loadingProp;
+    let loadingComponent;
+
+    requestQueue.map(r => {
+        if (r.status === 'loading' && contains(id, r.controllerId)) {
+            isLoading = true;
+            loadingComponent = r.controllerId.split('.')[0];
+            loadingProp = r.controllerId.split('.')[1];
+        }
+    });
+
+    const thisRequest = requestQueue.filter(r => contains(id, r.controllerId));
+    if (thisRequest.status === STATUS.OK) {
+        isLoading = false;
+    }
+
     const thisComponentTriggersEvents =
         dependencies &&
         dependencies.find(dependency =>
@@ -102,6 +127,13 @@ function NotifyObserversComponent({
         extraProps.fireEvent = fireEvent;
     }
 
+    // Set loading state
+    extraProps.loading_state = {
+        is_loading: isLoading,
+        prop_name: loadingProp,
+        component_name: loadingComponent,
+    };
+
     if (!isEmpty(extraProps)) {
         return React.cloneElement(children, extraProps);
     }
@@ -112,6 +144,7 @@ NotifyObserversComponent.propTypes = {
     id: PropTypes.string.isRequired,
     children: PropTypes.node.isRequired,
     path: PropTypes.array.isRequired,
+    loading: PropTypes.bool,
 };
 
 export default connect(

src/components/core/Reloader.react.js

@@ -51,7 +51,7 @@ class Reloader extends React.Component {
                 ) {
                     // Look if it was a css file.
                     let was_css = false;
-                    for (let a of reloadRequest.content.files) {
+                    for (const a of reloadRequest.content.files) {
                         if (a.is_css) {
                             was_css = true;
                             const nodesToDisable = [];