Fix crash when there are undefined references in the state tree e.g. when a track is deleted but still referred to by a session

plugins/dotplot-view/src/DotplotDisplay/index.ts

@@ -17,6 +17,7 @@ import {
   makeAbortableReaction,
 } from '@jbrowse/core/util'
 
+import { autorun } from 'mobx'
 import ServerSideRenderedBlockContent from '../ServerSideRenderedBlockContent'
 import { DotplotViewModel } from '../DotplotView/model'
 
@@ -71,19 +72,25 @@ export function stateModelFactory(configSchema: any) {
 
       return {
         afterAttach() {
-          makeAbortableReaction(
-            self as any,
-            renderBlockData,
-            renderBlockEffect as any,
-            {
-              name: `${self.type} ${self.id} rendering`,
-              delay: 1000,
-              fireImmediately: true,
-            },
-            this.setLoading,
-            this.setRendered,
-            this.setError,
-          )
+          const parent = getContainingView(self) as DotplotViewModel
+          autorun(reaction => {
+            if (parent.initialized) {
+              makeAbortableReaction(
+                self as any,
+                renderBlockData,
+                renderBlockEffect as any,
+                {
+                  name: `${self.type} ${self.id} rendering`,
+                  delay: 1000,
+                  fireImmediately: true,
+                },
+                this.setLoading,
+                this.setRendered,
+                this.setError,
+              )
+              reaction.dispose()
+            }
+          })
         },
 
         setLoading(abortController: AbortController) {

products/jbrowse-web/src/Loader.tsx

@@ -399,7 +399,18 @@ const Renderer = observer(
                 )
               }
             } else if (sessionSnapshot) {
-              rootModel.setSession(loader.sessionSnapshot)
+              try {
+                rootModel.setSession(loader.sessionSnapshot)
+              } catch (err) {
+                console.error(err)
+                rootModel.setDefaultSession()
+                const errorMessage = (err.message || '')
+                  .replace('[mobx-state-tree] ', '')
+                  .replace(/\(.+/, '')
+                rootModel.session?.notify(
+                  `Session could not be loaded. ${errorMessage}`,
+                )
+              }
             } else {
               const defaultJBrowseSession = rootModel.jbrowse.defaultSession
               if (defaultJBrowseSession?.views) {

products/jbrowse-web/src/rootModel.ts

@@ -16,6 +16,17 @@ import {
   getParent,
   SnapshotIn,
   types,
+  IAnyStateTreeNode,
+  Instance,
+  getType,
+  isArrayType,
+  isModelType,
+  isReferenceType,
+  isValidReference,
+  getPropertyMembers,
+  isMapType,
+  getChildType,
+  IAnyType,
 } from 'mobx-state-tree'
 import { observable, autorun } from 'mobx'
 import { UndoManager } from 'mst-middlewares'
@@ -25,6 +36,58 @@ import jbrowseWebFactory from './jbrowseModel'
 import RenderWorker from './rpc.worker'
 import sessionModelFactory from './sessionModelFactory'
 
+// attempts to remove undefined references from the given MST model. can only actually
+// remove them from arrays and maps. throws MST undefined ref error if it encounters
+// undefined refs in model properties
+function filterSessionInPlace(node: IAnyStateTreeNode, nodeType: IAnyType) {
+  type MSTArray = Instance<ReturnType<typeof types.array>>
+  type MSTMap = Instance<ReturnType<typeof types.map>>
+
+  // makes it work with session sharing
+  if (node === undefined) {
+    return
+  }
+  if (isArrayType(nodeType)) {
+    const array = node as MSTArray
+    const childType = getChildType(node)
+    if (isReferenceType(childType)) {
+      // filter array elements
+      for (let i = 0; i < array.length; ) {
+        if (!isValidReference(() => array[i])) {
+          array.splice(i, 1)
+        } else {
+          i += 1
+        }
+      }
+    }
+    array.forEach(el => {
+      filterSessionInPlace(el, childType)
+    })
+  } else if (isMapType(nodeType)) {
+    const map = node as MSTMap
+    const childType = getChildType(map)
+    if (isReferenceType(childType)) {
+      // filter the map members
+      for (const key in map.keys()) {
+        if (!isValidReference(() => map.get(key))) {
+          map.delete(key)
+        }
+      }
+    }
+    map.forEach(child => {
+      filterSessionInPlace(child, childType)
+    })
+  } else if (isModelType(nodeType)) {
+    // iterate over children
+    const { properties } = getPropertyMembers(node)
+
+    Object.entries(properties).forEach(([pname, ptype]) => {
+      // @ts-ignore
+      filterSessionInPlace(node[pname], ptype)
+    })
+  }
+}
+
 interface Menu {
   label: string
   menuItems: MenuItem[]
@@ -151,7 +214,18 @@ export default function RootModel(
         )
       },
       setSession(sessionSnapshot?: SnapshotIn<typeof Session>) {
+        const oldSession = self.session
         self.session = cast(sessionSnapshot)
+        if (self.session) {
+          // validate all references in the session snapshot
+          try {
+            filterSessionInPlace(self.session, getType(self.session))
+          } catch (error) {
+            // throws error if session filtering failed
+            self.session = oldSession
+            throw error
+          }
+        }
       },
       setAssemblyEditing(flag: boolean) {
         self.isAssemblyEditing = flag

products/jbrowse-web/src/tests/Dotplot.test.js

@@ -36,7 +36,7 @@ describe('dotplot view', () => {
     )
     const { findByTestId } = render(<JBrowse pluginManager={pluginManager} />)
 
-    const canvas = await findByTestId('prerendered_canvas', { timeout: 10000 })
+    const canvas = await findByTestId('prerendered_canvas', { timeout: 20000 })
 
     const img = canvas.toDataURL()
     const data = img.replace(/^data:image\/\w+;base64,/, '')