Pause updates to the live graph while training is happening

glastonbridge · glastonbridge · commit cac88c9e5c7a · 2026-03-27T16:34:34.000Z
diff --git a/lang/ui.ca.json b/lang/ui.ca.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Gruixut",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Vista prèvia del gràfic",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Thick",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Graph preview",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.es-es.json b/lang/ui.es-es.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Grosor",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Vista previa del gráfico",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.fr.json b/lang/ui.fr.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Épais",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Aperçu du graphique",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.ja.json b/lang/ui.ja.json
@@ -979,6 +979,10 @@
     "defaultMessage": "太い",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "グラフのプレビュー",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.ko.json b/lang/ui.ko.json
@@ -979,6 +979,10 @@
     "defaultMessage": "두꺼움",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "그래프 미리보기",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.lol.json b/lang/ui.lol.json
@@ -979,6 +979,10 @@
     "defaultMessage": "crwdns363514:0crwdne363514:0",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "crwdns363892:0crwdne363892:0",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.nl.json b/lang/ui.nl.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Vet",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Grafiek voorbeeld",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.pl.json b/lang/ui.pl.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Grube",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Podgląd wykresu",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.pt-br.json b/lang/ui.pt-br.json
@@ -979,6 +979,10 @@
     "defaultMessage": "Grossa",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "Pré-visualização do gráfico",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/lang/ui.zh-tw.json b/lang/ui.zh-tw.json
@@ -979,6 +979,10 @@
     "defaultMessage": "厚實的",
     "description": "Graph line weight option"
   },
+  "graph-paused-training": {
+    "defaultMessage": "Training…",
+    "description": "Shown in the live graph panel while the model is being trained"
+  },
   "graph-preview": {
     "defaultMessage": "圖表預覽",
     "description": "Label for preview of the graph shown in the settings dialog"
diff --git a/src/components/LiveGraphPanel.tsx b/src/components/LiveGraphPanel.tsx
@@ -30,6 +30,7 @@ import AlertIcon from "./AlertIcon";
 import InfoToolTip from "./InfoToolTip";
 import LiveGraph from "./LiveGraph";
 import PredictedAction from "./PredictedAction";
+import { TrainModelDialogStage } from "../model";
 
 interface LiveGraphPanelProps {
   showPredictedAction?: boolean;
@@ -46,6 +47,11 @@ const LiveGraphPanel = ({
 }: LiveGraphPanelProps) => {
   const actions = useDataConnectionActions();
   const dataConnection = useStore((s) => s.dataConnection);
+  const isTraining = useStore(
+    (s) =>
+      s.trainModelDialogStage === TrainModelDialogStage.TrainingInProgress ||
+      s.trainModelDialogStage === TrainModelDialogStage.NavigatingToTesting
+  );
   const isConnected = dataConnection.step === DataConnectionStep.Connected;
   const isReconnecting = dataConnection.isReconnecting;
   const parentPortalRef = useRef(null);
@@ -160,11 +166,16 @@ const LiveGraphPanel = ({
                   <FormattedMessage id="reconnecting" />
                 </Text>
               )}
+              {isTraining && (
+                <Text bg="white" fontWeight="bold">
+                  <FormattedMessage id="graph-paused-training" />
+                </Text>
+              )}
             </HStack>
           </HStack>
         </Portal>
         <HStack position="absolute" width="100%" height="100%" spacing={0}>
-          <LiveGraph />
+          {(showPredictedAction || !isTraining) && <LiveGraph />}
           {showPredictedAction && <PredictedAction />}
         </HStack>
       </HStack>
diff --git a/src/components/TrainModelFlowDialogs.tsx b/src/components/TrainModelFlowDialogs.tsx
@@ -31,9 +31,10 @@ const TrainModelDialogs = ({ finalFocusRef }: TrainModelDialogsProps) => {
       const result = await trainModel();
       if (result) {
         navigate(createTestingModelPageUrl());
+        setTimeout(() => closeTrainModelDialogs(), 0); // Push it onto the event queue after the navigate call
       }
     },
-    [navigate, setSettings, trainModel]
+    [closeTrainModelDialogs, navigate, setSettings, trainModel]
   );
   return (
     <>
diff --git a/src/messages/ui.ca.json b/src/messages/ui.ca.json
@@ -1769,6 +1769,12 @@
       "value": "Gruixut"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
@@ -1783,6 +1783,12 @@
       "value": "Thick"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.es-es.json b/src/messages/ui.es-es.json
@@ -1783,6 +1783,12 @@
       "value": "Grosor"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.fr.json b/src/messages/ui.fr.json
@@ -1787,6 +1787,12 @@
       "value": "Épais"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.ja.json b/src/messages/ui.ja.json
@@ -1771,6 +1771,12 @@
       "value": "太い"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.ko.json b/src/messages/ui.ko.json
@@ -1775,6 +1775,12 @@
       "value": "두꺼움"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.lol.json b/src/messages/ui.lol.json
@@ -1743,6 +1743,12 @@
       "value": "crwdns363514:0crwdne363514:0"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.nl.json b/src/messages/ui.nl.json
@@ -1783,6 +1783,12 @@
       "value": "Vet"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.pl.json b/src/messages/ui.pl.json
@@ -1787,6 +1787,12 @@
       "value": "Grube"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.pt-br.json b/src/messages/ui.pt-br.json
@@ -1783,6 +1783,12 @@
       "value": "Grossa"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/messages/ui.zh-tw.json b/src/messages/ui.zh-tw.json
@@ -1783,6 +1783,12 @@
       "value": "厚實的"
     }
   ],
+  "graph-paused-training": [
+    {
+      "type": 0,
+      "value": "Training…"
+    }
+  ],
   "graph-preview": [
     {
       "type": 0,
diff --git a/src/model.ts b/src/model.ts
@@ -124,6 +124,7 @@ export const enum TrainModelDialogStage {
   Help,
   TrainingError,
   TrainingInProgress,
+  NavigatingToTesting,
 }
 
 export interface SaveState {
diff --git a/src/store.ts b/src/store.ts
@@ -1243,6 +1243,13 @@ const createMlStore = (logging: Logging) => {
           } else {
             await trainModel();
             callback?.();
+            // Push the trainModelDialogStage change to the back of the event queue so it happens
+            // after navigation changes.
+            setTimeout(
+              () =>
+                set({ trainModelDialogStage: TrainModelDialogStage.Closed }),
+              0
+            );
           }
         },
 
@@ -1282,7 +1289,7 @@ const createMlStore = (logging: Logging) => {
             {
               model,
               trainModelDialogStage: model
-                ? TrainModelDialogStage.Closed
+                ? TrainModelDialogStage.NavigatingToTesting
                 : TrainModelDialogStage.TrainingError,
               timestamp,
               ...updatedProject,
