Persist theme - Reload everything on a disconnect (#3250)

* Reload everything on a disconnect

* fix unit-integration tests

* Further improvements to connection manager; persist theme across reconnects

* Fix up artifactGraph.test

* Actually pass the callback

* Kurt hmmm (#3308)

* kurts attempts

* we're almost sane

* get tests working, praise be

---------

Co-authored-by: 49lf <ircsurfer33@gmail.com>

* typo

---------

Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

src/hooks/useSetupEngineManager.ts

@@ -4,29 +4,30 @@ import { deferExecution } from 'lib/utils'
 import { Themes } from 'lib/theme'
 import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
 import { useModelingContext } from './useModelingContext'
+import { useNetworkContext } from 'hooks/useNetworkContext'
 import { useAppState, useAppStream } from 'AppState'
+import { SettingsViaQueryString } from 'lib/settings/settingsTypes'
+import {
+  EngineConnectionStateType,
+  EngineConnectionEvents,
+  DisconnectingType,
+} from 'lang/std/engineConnection'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
-  token?: string,
+  modelingSend: ReturnType<typeof useModelingContext>['send'],
+  modelingContext: ReturnType<typeof useModelingContext>['context'],
   settings = {
     pool: null,
     theme: Themes.System,
     highlightEdges: true,
     enableSSAO: true,
-    modelingSend: (() => {}) as any,
-    modelingContext: {} as any,
     showScaleGrid: false,
-  } as {
-    pool: string | null
-    theme: Themes
-    highlightEdges: boolean
-    enableSSAO: boolean
-    modelingSend: ReturnType<typeof useModelingContext>['send']
-    modelingContext: ReturnType<typeof useModelingContext>['context']
-    showScaleGrid: boolean
-  }
+  } as SettingsViaQueryString,
+  token?: string
 ) {
+  const networkContext = useNetworkContext()
+  const { pingPongHealth, immediateState } = networkContext
   const { setAppState } = useAppState()
   const { setMediaStream } = useAppStream()
 
@@ -35,10 +36,10 @@ export function useSetupEngineManager(
   if (settings.pool) {
     // override the pool param (?pool=) to request a specific engine instance
     // from a particular pool.
-    engineCommandManager.pool = settings.pool
+    engineCommandManager.settings.pool = settings.pool
   }
 
-  const startEngineInstance = (restart: boolean = false) => {
+  const startEngineInstance = () => {
     // Load the engine command manager once with the initial width and height,
     // then we do not want to reload it.
     const { width: quadWidth, height: quadHeight } = getDimensions(
@@ -50,14 +51,6 @@ export function useSetupEngineManager(
       setIsStreamReady: (isStreamReady) => setAppState({ isStreamReady }),
       width: quadWidth,
       height: quadHeight,
-      executeCode: () => {
-        // We only want to execute the code here that we already have set.
-        // Nothing else.
-        kclManager.isFirstRender = true
-        return kclManager.executeCode(true).then(() => {
-          kclManager.isFirstRender = false
-        })
-      },
       token,
       settings,
       makeDefaultPlanes: () => {
@@ -67,7 +60,7 @@ export function useSetupEngineManager(
         return modifyGrid(kclManager.engineCommandManager, hidden)
       },
     })
-    settings.modelingSend({
+    modelingSend({
       type: 'Set context',
       data: {
         streamDimensions: {
@@ -90,9 +83,27 @@ export function useSetupEngineManager(
   }, [
     streamRef?.current?.offsetWidth,
     streamRef?.current?.offsetHeight,
-    settings.modelingSend,
+    modelingSend,
   ])
 
+  useEffect(() => {
+    if (pingPongHealth === 'TIMEOUT') {
+      engineCommandManager.tearDown()
+    }
+  }, [pingPongHealth])
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (immediateState.type === EngineConnectionStateType.Disconnected) {
+        engineCommandManager.engineConnection = undefined
+        startEngineInstance()
+      }
+    }, 3000)
+    return () => {
+      clearInterval(intervalId)
+    }
+  }, [immediateState])
+
   useEffect(() => {
     const handleResize = deferExecution(() => {
       const { width, height } = getDimensions(
@@ -100,14 +111,14 @@ export function useSetupEngineManager(
         streamRef?.current?.offsetHeight ?? 0
       )
       if (
-        settings.modelingContext.store.streamDimensions.streamWidth !== width ||
-        settings.modelingContext.store.streamDimensions.streamHeight !== height
+        modelingContext.store.streamDimensions.streamWidth !== width ||
+        modelingContext.store.streamDimensions.streamHeight !== height
       ) {
         engineCommandManager.handleResize({
           streamWidth: width,
           streamHeight: height,
         })
-        settings.modelingSend({
+        modelingSend({
           type: 'Set context',
           data: {
             streamDimensions: {
@@ -120,7 +131,7 @@ export function useSetupEngineManager(
     }, 500)
 
     const onOnline = () => {
-      startEngineInstance(true)
+      startEngineInstance()
     }
 
     const onVisibilityChange = () => {
@@ -136,10 +147,18 @@ export function useSetupEngineManager(
     window.document.addEventListener('visibilitychange', onVisibilityChange)
 
     const onAnyInput = () => {
-      if (
+      const isEngineNotReadyOrConnecting =
         !engineCommandManager.engineConnection?.isReady() &&
         !engineCommandManager.engineConnection?.isConnecting()
-      ) {
+
+      const conn = engineCommandManager.engineConnection
+
+      const isStreamPaused =
+        conn?.state.type === EngineConnectionStateType.Disconnecting &&
+        conn?.state.value.type === DisconnectingType.Pause
+
+      if (isEngineNotReadyOrConnecting || isStreamPaused) {
+        engineCommandManager.engineConnection = undefined
         startEngineInstance()
       }
     }
@@ -150,7 +169,6 @@ export function useSetupEngineManager(
     window.document.addEventListener('touchstart', onAnyInput)
 
     const onOffline = () => {
-      kclManager.isFirstRender = true
       engineCommandManager.tearDown()
     }