fix #7116 only send one frame request at a time to the server (#7446)

Author: moellep

sirepo/package_data/static/js/sirepo-components.js

@@ -4776,7 +4776,7 @@ SIREPO.app.directive('sbatchLoginModal', function() {
               <div class="modal-dialog" role="document">
                 <div class="modal-content">
                   <div class="modal-header bg-warning">
-                    <span class="lead modal-title text-info">Login to {{ authState.sbatchHostDisplayName }}</span>
+                    <span class="lead modal-title text-info">{{ loginHeading() }}</span>
                     <button data-ng-click="cancel()" type="button" class="close" data-ng-disabled="! sbatchLoginService.query('showLogin')"><span>&times;</span></button>
                     </div>
                     <div class="modal-body">
@@ -4823,6 +4823,8 @@ SIREPO.app.directive('sbatchLoginModal', function() {
                 sbatchLoginService.event('credsCancel');
             };
 
+            $scope.loginHeading = () => sbatchLoginService.loginButtonLabel();
+
             $scope.submit = () => {
                 $scope.warning = null;
                 sbatchLoginService.event(

sirepo/package_data/static/js/sirepo.js

@@ -1737,10 +1737,11 @@ SIREPO.app.factory('srCache', function(appState, $rootScope) {
 });
 
 
-SIREPO.app.factory('frameCache', function(appState, panelState, requestSender, srCache, $interval, $rootScope, $timeout) {
-    var self = {};
-    var frameCountByModelKey = {};
-    var masterFrameCount = 0;
+SIREPO.app.factory('frameCache', function(appState, panelState, requestSender, srCache, $rootScope, $timeout) {
+    const self = {};
+    let frameCountByModelKey = {};
+    let masterFrameCount = 0;
+    const requestByModelKey = {};
     self.modelToCurrentFrame = {};
 
     function frameId(frameReport, frameIndex) {
@@ -1782,92 +1783,105 @@ SIREPO.app.factory('frameCache', function(appState, panelState, requestSender, s
         return self.modelToCurrentFrame[modelName] || 0;
     };
 
-    self.getFrame = function(modelName, index, isPlaying, callback) {
-        const isHidden = panelState.isHidden(modelName);
-        let frameRequestTime = now();
-        let setPanelStateIsLoadingTimer = null;
-
-	function cancelSetPanelStateIsLoadingTimer() {
-	    if (setPanelStateIsLoadingTimer) {
-		$timeout.cancel(setPanelStateIsLoadingTimer);
-		setPanelStateIsLoadingTimer = null;
-	    }
-	}
+    self.getFrame = function(modelKey, index, isPlaying, callback) {
+        let loadingTimer = null;
 
-        function onError(response) {
-	    if (! (response && response.error)) {
-                panelState.reportNotGenerated(modelName);
-            }
-            else if (! response.sbatchLoginServiceSRException) {
-                panelState.setLoading(modelName, false);
-                panelState.setError(modelName, response.error);
+        const callbackData = (data, frameRequestTime) => {
+            const t = framePeriod() - (now() - frameRequestTime);
+            if (t <= 0) {
+                callback(index, data);
+                return;
             }
-            cancelSetPanelStateIsLoadingTimer();
-        }
+            $timeout(() => callback(index, data), t);
+        };
 
-        function now() {
-            return new Date().getTime();
-        }
+	const cancelLoadingTimer = () => {
+            panelState.setLoading(modelKey, false);
+	    if (loadingTimer) {
+		$timeout.cancel(loadingTimer);
+		loadingTimer = null;
+	    }
+	};
 
         const framePeriod = () => {
-            if (! isPlaying || isHidden) {
+            if (! isPlaying || panelState.isHidden(modelKey)) {
                 return 0;
             }
-            const milliseconds = 1000;
-            var x = appState.models[modelName].framesPerSecond;
-            if (! x) {
-                return  0.5 * milliseconds;
+            const s = appState.models[modelKey].framesPerSecond;
+            return 1000 / (s && parseInt(s) ? parseInt(s) : 2);
+        };
+
+        const now = () => new Date().getTime();
+
+        const onError = (response) => {
+	    if (! (response && response.error)) {
+                panelState.reportNotGenerated(modelKey);
+            }
+            else if (! response.sbatchLoginServiceSRException) {
+                panelState.setError(modelKey, response.error);
             }
-            return  milliseconds / parseInt(x);
+            cancelLoadingTimer();
         };
 
-        const callbackData = (data) => {
-            let e = framePeriod() - (now() - frameRequestTime);
-            if (e <= 0) {
-                callback(index, data);
-                return;
+        const checkNextRequest = () => {
+            const i = requestByModelKey[modelKey];
+            delete requestByModelKey[modelKey];
+            if (i != index) {
+                index = i;
+                // avoid a recursive stack overflow
+                $timeout(() => requestFunction(true), 0);
             }
-            $interval(
-                function() {
-                    callback(index, data);
-                },
-                e,
-                1
-            );
         };
 
-        const requestFunction = function() {
-            const id = frameId(modelName, index);
-            srCache.getFrame(id, modelName, (data) => {
+        const requestFunction = (isRetry) => {
+            const id = frameId(modelKey, index);
+            const frameRequestTime = now();
+            srCache.getFrame(id, modelKey, (data) => {
+                if (isRetry && modelKey in requestByModelKey) {
+                    // another frame has been requested since the retry was started
+                    return;
+                }
                 if (data) {
-                    callbackData(data);
+                    callbackData(data, frameRequestTime);
+                    return;
+                }
+                if (modelKey in requestByModelKey) {
+                    requestByModelKey[modelKey] = index;
                     return;
                 }
-                setPanelStateIsLoadingTimer = $timeout(() => {
-                    panelState.setLoading(modelName, true);
-                }, 5000);
+                if (! loadingTimer) {
+                    loadingTimer = $timeout(() => {
+                        panelState.setLoading(modelKey, true);
+                    }, 5000);
+                }
+                requestByModelKey[modelKey] = index;
                 requestSender.sendRequest(
                     {
                         routeName: 'simulationFrame',
                         frame_id: id,
                     },
-                    function(data) {
-                        cancelSetPanelStateIsLoadingTimer();
-                        panelState.setLoading(modelName, false);
+                    (data) => {
+                        cancelLoadingTimer();
                         if ('state' in data && data.state === 'missing') {
                             onError();
-                            return;
                         }
-                        callbackData(data);
-                        srCache.saveFrame(id, modelName, data);
+                        else {
+                            callbackData(data, frameRequestTime);
+                            srCache.saveFrame(id, modelKey, data);
+                        }
+                        checkNextRequest();
                     },
                     null,
-                    onError
+                    (response) => {
+                        onError(response);
+                        checkNextRequest();
+                    }
                 );
             });
         };
-        if (isHidden) {
-            panelState.addPendingRequest(modelName, requestFunction);
+
+        if (panelState.isHidden(modelKey)) {
+            panelState.setPendingRequest(modelKey, requestFunction);
         }
         else {
             requestFunction();
@@ -2145,10 +2159,6 @@ SIREPO.app.factory('panelState', function(appState, uri, simulationQueue, utilit
         return uri.format(route, {...a, ...args});
     }
 
-    self.addPendingRequest = function(name, requestFunction) {
-        pendingRequests[name] = requestFunction;
-    };
-
     self.clear = function(name) {
         if (name) {
             clearPanel(name);
@@ -2332,7 +2342,7 @@ SIREPO.app.factory('panelState', function(appState, uri, simulationQueue, utilit
         if (queueItems[name]) {
             simulationQueue.cancelItem(queueItems[name]);
         }
-        self.addPendingRequest(name, function() {
+        self.setPendingRequest(name, () => {
             queueItems[name] = sendRequest(name, wrappedCallback, errorCallback);
         });
         if (! self.isHidden(name)) {
@@ -2360,6 +2370,8 @@ SIREPO.app.factory('panelState', function(appState, uri, simulationQueue, utilit
 
     self.setData = (name, data) => setPanelValue(name, 'data', data);
 
+    self.setPendingRequest = (name, requestFunction) =>  pendingRequests[name] = requestFunction;
+
     self.setWaiting = (name, isWaiting) => {
         setPanelValue(name, 'waiting', isWaiting);
     };