Rough and ready delay for analysis window.

src/components/GeneratorButton.js

@@ -3,7 +3,7 @@ import { Download } from "styled-icons/material";
 import { useConnectionService } from "../ConnectionServiceProvider";
 import { Button } from "./Button";
 
-const GeneratorButton = ({ children, finishMessage, progressMessage, sessionIndex, startMessage, uuid }) => {
+const GeneratorButton = ({ children, className, finishMessage, progressMessage, sessionIndex, startMessage, uuid }) => {
 
   const [isGenerating, setGenerating] = useState(false);
   const cs = useConnectionService();
@@ -43,6 +43,7 @@ const GeneratorButton = ({ children, finishMessage, progressMessage, sessionInde
 
   return (
     <Button
+      className={className}
       disabled={isGenerating}
       onClick={startGeneration}
     >
@@ -68,8 +69,9 @@ export const ReplayButton = ({ sessionIndex, uuid }) => (
   </GeneratorButton>
 );
 
-export const AnalysisButton = ({ label='Analysis', sessionIndex, uuid }) => (
+export const AnalysisButton = ({ className, label='Analysis', sessionIndex, uuid }) => (
   <GeneratorButton
+    className={className}
     finishMessage='ANALYSIS_GENERATION_FINISHED'
     sessionIndex={sessionIndex}
     startMessage='GENERATE_ANALYSIS_DOWNLOAD'

src/modules/analysis/components/AnalysisScreen.js

@@ -65,9 +65,6 @@ export const AnalysisScreen = ({ analyser, children, manifest }) => {
               {
                 children
               }
-              {
-                process.env.NODE_ENV === 'development' && <div>[DEV]</div>
-              }
             </MenuWrapper>
             <Contents selectedCar={selectedCar} />
           </Container>

src/modules/analysis/components/FlagPanel.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import styled from 'styled-components';
 
 import { useAnalysis } from './context';
+import { useSetting } from '../../settings';
 
 const Outer = styled.div`
   grid-area: flag;
@@ -22,8 +23,9 @@ export const FlagPanel = observer(
   () => {
     const analysis = useAnalysis();
     const session = analysis.state.session;
+    const [delay] = useSetting('delay');
 
-    const delta = analysis.referenceTimestamp() - analysis.state.lastUpdated;
+    const delta = analysis.referenceTimestamp() - analysis.state.lastUpdated - (delay * 1000);
 
     return (
       <Outer>

src/modules/analysis/components/Menu.js

@@ -12,6 +12,7 @@ const MenuWrapper = styled.ul`
   margin: 0;
   margin-left: 0.5em;
   padding: 0;
+  flex-grow: 1;
 
   overflow-y: auto;
 `;

src/pages/Analysis.js

@@ -1,11 +1,27 @@
 import { createAnalyser } from '@timing71/common/analysis';
 import { applyPatch, applySnapshot } from 'mobx-state-tree';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useBroadcastChannel } from '../broadcastChannel';
 import { AnalysisButton } from '../components/GeneratorButton';
 import { LoadingScreen } from '../components/LoadingScreen';
 import { useConnectionService } from '../ConnectionServiceProvider';
 import { AnalysisScreen } from '../modules/analysis';
+import { useSetting } from '../modules/settings';
+import styled from 'styled-components';
+
+const DelayNote = styled.small`
+  padding: 0.25em;
+  text-align: center;
+`;
+
+const DownloadAnalysisButton = styled(AnalysisButton)`
+  margin: 0.5em;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 export const Analysis = ({ match: { params: { serviceUUID } } }) => {
   const cs = useConnectionService();
@@ -17,6 +33,20 @@ export const Analysis = ({ match: { params: { serviceUUID } } }) => {
   const analyser = useRef(createAnalyser(undefined, true));
   const initialised = useRef(false);
 
+  const [delay] = useSetting('delay');
+
+  const maybeDelay = useCallback(
+    (fn) => {
+    if (delay > 0) {
+      setTimeout(fn, delay * 1000);
+    }
+    else {
+      fn();
+    }
+  },
+  [delay]
+);
+
   useEffect(
     () => {
 
@@ -29,50 +59,76 @@ export const Analysis = ({ match: { params: { serviceUUID } } }) => {
             setManifest(msg.state.manifest);
           }
           if (msg.analysis?.state) {
-            applySnapshot(
-              analyser.current,
-              msg.analysis.state
+            maybeDelay(
+              () => {
+                applySnapshot(
+                  analyser.current,
+                  msg.analysis.state
+                );
+                initialised.current = true;
+              }
             );
-            initialised.current = true;
           }
         }
       );
 
     },
-    [cs, serviceUUID]
+    [cs, maybeDelay, serviceUUID]
   );
 
   useEffect(
     () => {
       if (channelData && analyser.current) {
         if (channelData.type === 'ANALYSIS_STATE') {
-          applySnapshot(
-            analyser.current,
-            channelData.data
+          maybeDelay(
+            ()  => {
+              applySnapshot(
+                analyser.current,
+                channelData.data
+              );
+              initialised.current = true;
+            }
           );
-          initialised.current = true;
         }
-        else if (channelData.type === 'ANALYSIS_DELTA' && initialised.current) {
-          applyPatch(
-            analyser.current,
-            channelData.data
+        else if (channelData.type === 'ANALYSIS_DELTA') {
+          maybeDelay(
+            () => {
+              if (initialised.current) {
+                applyPatch(
+                  analyser.current,
+                  channelData.data
+                );
+              }
+            }
           );
         }
       }
     },
-    [channelData]
+    [channelData, maybeDelay]
   );
 
-  if (analyser.current && manifest) {
+  if (analyser.current && manifest && initialised.current) {
     return (
       <AnalysisScreen
         analyser={analyser.current}
         manifest={manifest}
       >
-        <AnalysisButton
-          label='Download analysis'
-          uuid={serviceUUID}
-        />
+        <Container>
+          {
+            delay > 0 && (
+              <DelayNote>
+                Delayed by {delay} seconds to match timing screen
+              </DelayNote>
+            )
+          }
+          <DownloadAnalysisButton
+            label='Download analysis'
+            uuid={serviceUUID}
+          />
+          {
+            process.env.NODE_ENV === 'development' && <div>[DEV]</div>
+          }
+        </Container>
       </AnalysisScreen>
     );
   }