Destroy old root model on pluginManager reload (#5140)

Author: garrettjstevens

products/jbrowse-web/src/components/Loader.tsx

@@ -3,6 +3,7 @@ import { Suspense, lazy, useEffect, useState } from 'react'
 import { FatalErrorDialog } from '@jbrowse/core/ui'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
 import { observer } from 'mobx-react'
+import { destroy } from 'mobx-state-tree'
 import {
   QueryParamProvider,
   StringParam,
@@ -128,7 +129,12 @@ const Renderer = observer(function ({
 
     try {
       if (ready) {
-        setPluginManager(createPluginManager(loader, reloadPluginManager))
+        setPluginManager(previousPluginManager => {
+          if (previousPluginManager?.rootModel) {
+            destroy(previousPluginManager.rootModel)
+          }
+          return createPluginManager(loader, reloadPluginManager)
+        })
       }
     } catch (e) {
       console.error(e)

products/jbrowse-web/src/tests/Loader.test.tsx

@@ -1,3 +1,5 @@
+import { FatalErrorDialog } from '@jbrowse/core/ui'
+import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
 import { render, waitFor } from '@testing-library/react'
 import { Image, createCanvas } from 'canvas'
 import { LocalFile } from 'generic-filehandle2'
@@ -116,7 +118,17 @@ test('can use config from a url with nonexistent share param ', async () => {
 
 test('can catch error from loading a bad config', async () => {
   const { findAllByText } = render(
-    <App search="?config=test_data/bad_config_test/config.json" />,
+    <ErrorBoundary
+      FallbackComponent={props => (
+        <FatalErrorDialog
+          {...props}
+          resetButtonText="Reset Session"
+          onFactoryReset={() => {}}
+        />
+      )}
+    >
+      <App search="?config=test_data/bad_config_test/config.json" />
+    </ErrorBoundary>,
   )
   await findAllByText(/Error while converting/)
 }, 20000)