reject old responses of the same output component

fixes plotly/dash#133

Author: chriddyp

src/actions/index.js

@@ -1,26 +1,31 @@
 /* global fetch:true, Promise:true, document:true */
 import {
+    adjust,
+    any,
     concat,
     contains,
+    findIndex,
+    findLastIndex,
     has,
     intersection,
     isEmpty,
     keys,
     lensPath,
+    lensProp,
     pluck,
-    reject,
+    propEq,
+    set,
     slice,
     sort,
     type,
-    union,
     view
 } from 'ramda';
 import {createAction} from 'redux-actions';
 import {crawlLayout, hasId} from '../reducers/utils';
 import {APP_STATES} from '../reducers/constants';
 import {ACTIONS} from './constants';
 import cookie from 'cookie';
-import {urlBase} from '../utils';
+import {uid, urlBase} from '../utils';
 
 export const updateProps = createAction(ACTIONS('ON_PROP_CHANGE'));
 export const setRequestQueue = createAction(ACTIONS('SET_REQUEST_QUEUE'));
@@ -253,8 +258,9 @@ export function notifyObservers(payload) {
              * the change for Child. if this update has already been queued up,
              * then skip the update for the other component
              */
-            const controllersInExistingQueue = intersection(
-                requestQueue, controllers
+            const controllerIsInExistingQueue = any(r =>
+                contains(r.controllerId, controllers) && r.status === 'loading',
+                requestQueue
             );
 
             /*
@@ -267,7 +273,7 @@ export function notifyObservers(payload) {
              if (
                  (controllersInFutureQueue.length === 0) &&
                  (has(outputComponentId, getState().paths)) &&
-                 (controllersInExistingQueue.length === 0)
+                 !controllerIsInExistingQueue
              ) {
                  queuedObservers.push(outputIdAndProp)
              }
@@ -278,7 +284,15 @@ export function notifyObservers(payload) {
          * updated in a queue. not all of these requests will be fired in this
          * action
          */
-        dispatch(setRequestQueue(union(queuedObservers, requestQueue)));
+        const newRequestQueue = queuedObservers.map(
+            i => ({controllerId: i, status: 'loading', uid: uid()})
+        )
+        dispatch(setRequestQueue(
+            concat(
+                requestQueue,
+                newRequestQueue
+            )
+        ));
 
         const promises = [];
         for (let i = 0; i < queuedObservers.length; i++) {
@@ -356,13 +370,33 @@ export function notifyObservers(payload) {
                     payload: {status: res.status}
                 });
 
-                // clear this item from the request queue
-                dispatch(setRequestQueue(
-                    reject(
-                        id => id === outputIdAndProp,
-                        getState().requestQueue
-                    )
-                ));
+                // update the status of this request
+                const postRequestQueue = getState().requestQueue;
+                const requestUid = newRequestQueue[i].uid;
+                const thisRequestIndex = findIndex(
+                    propEq('uid', requestUid),
+                    postRequestQueue
+                );
+                const updatedQueue = adjust(
+                    set(lensProp('status'), res.status),
+                    thisRequestIndex,
+                    postRequestQueue
+                );
+                dispatch(setRequestQueue(updatedQueue));
+
+                /*
+                 * Check to see if another request has already come back
+                 * _after_ this one.
+                 * If so, ignore this request.
+                 */
+                const latestRequestIndex = findLastIndex(
+                    propEq('controllerId', newRequestQueue[i].controllerId),
+                    updatedQueue
+                );
+                if (latestRequestIndex > thisRequestIndex &&
+                    updatedQueue[latestRequestIndex].status === 200) {
+                    return;
+                }
 
                 return res.json().then(function handleJson(data) {
 

src/components/core/DocumentTitle.react.js

@@ -1,7 +1,7 @@
 /* global document:true */
 
 import {connect} from 'react-redux'
-import {isEmpty} from 'ramda'
+import {any} from 'ramda'
 import {Component, PropTypes} from 'react'
 
 class DocumentTitle extends Component {
@@ -13,7 +13,7 @@ class DocumentTitle extends Component {
     }
 
     componentWillReceiveProps(props) {
-        if (!isEmpty(props.requestQueue)) {
+        if (any(r => r.status === 'loading', props.requestQueue)) {
             document.title = 'Updating...';
         } else {
             document.title = this.state.initialTitle;

src/components/core/Loading.react.js

@@ -1,12 +1,12 @@
 import {connect} from 'react-redux'
-import {isEmpty} from 'ramda'
+import {any} from 'ramda'
 import React, {PropTypes} from 'react'
 
 function Loading(props) {
-    if (!isEmpty(props.requestQueue)) {
+    if (any(r => r.status === 'loading', props.requestQueue)) {
         return (
             <div className="_dash-loading-callback"/>
-        )
+        );
     } else {
         return null;
     }

src/utils.js

@@ -25,3 +25,13 @@ export function urlBase(config) {
              requests_pathname_prefix from config`, config);
     }
 }
+
+export function uid() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+    s4() + '-' + s4() + s4() + s4();
+}