Move ErrorBoundary so that tracks/views that have crashed can be closed more easily

packages/core/ui/App.tsx

@@ -209,13 +209,18 @@ const ViewPanel = observer(
     const { ReactComponent } = viewType
     return (
       <ViewContainer view={view} onClose={() => session.removeView(view)}>
-        <Suspense fallback={<LoadingEllipses />}>
-          <ReactComponent
-            model={view}
-            session={session}
-            getTrackType={pluginManager.getTrackType}
-          />
-        </Suspense>
+        <ErrorBoundary
+          key={`view-${view.id}`}
+          FallbackComponent={({ error }) => <ErrorMessage error={error} />}
+        >
+          <Suspense fallback={<LoadingEllipses />}>
+            <ReactComponent
+              model={view}
+              session={session}
+              getTrackType={pluginManager.getTrackType}
+            />
+          </Suspense>
+        </ErrorBoundary>
       </ViewContainer>
     )
   },
@@ -283,14 +288,11 @@ const App = observer(
           <div className={classes.components}>
             {views.length ? (
               views.map(view => (
-                <ErrorBoundary
+                <ViewPanel
                   key={`view-${view.id}`}
-                  FallbackComponent={({ error }) => (
-                    <ErrorMessage error={error} />
-                  )}
-                >
-                  <ViewPanel view={view} session={session} />
-                </ErrorBoundary>
+                  view={view}
+                  session={session}
+                />
               ))
             ) : (
               <ViewLauncher {...props} />

plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { ErrorBoundary } from 'react-error-boundary'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { LoadingEllipses, ErrorMessage } from '@jbrowse/core/ui'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
 // locals
@@ -75,14 +74,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
             )}
           </Paper>
         ) : (
-          tracks.map(track => (
-            <ErrorBoundary
-              key={track.id}
-              FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-            >
-              <TrackContainer model={model} track={track} />
-            </ErrorBoundary>
-          ))
+          tracks.map(track => <TrackContainer model={model} track={track} />)
         )}
       </TracksContainer>
     </div>

plugins/linear-genome-view/src/LinearGenomeView/components/TrackContainer.tsx

@@ -5,7 +5,8 @@ import { observer } from 'mobx-react'
 import { isAlive } from 'mobx-state-tree'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
-import { ResizeHandle } from '@jbrowse/core/ui'
+import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
+import { ErrorBoundary } from 'react-error-boundary'
 import { useDebouncedCallback } from '@jbrowse/core/util'
 
 // locals
@@ -109,36 +110,43 @@ function TrackContainer({
   return (
     <Paper className={classes.root} variant="outlined">
       <TrackContainerLabel model={track} view={model} />
-      <div
-        className={classes.trackRenderingContainer}
-        style={{ height }}
-        onScroll={event => display.setScrollTop(event.currentTarget.scrollTop)}
-        onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
+      <ErrorBoundary
+        key={track.id}
+        FallbackComponent={({ error }) => <ErrorMessage error={error} />}
       >
         <div
-          ref={ref}
-          className={classes.renderingComponentContainer}
-          style={{ transform: `scaleX(${model.scaleFactor})` }}
+          className={classes.trackRenderingContainer}
+          style={{ height }}
+          onScroll={event =>
+            display.setScrollTop(event.currentTarget.scrollTop)
+          }
+          onDragEnter={debouncedOnDragEnter}
+          data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         >
-          <RenderingComponent
-            model={display}
-            onHorizontalScroll={horizontalScroll}
-          />
-        </div>
-
-        {DisplayBlurb ? (
           <div
-            style={{
-              position: 'absolute',
-              left: 0,
-              top: display.height - 20,
-            }}
+            ref={ref}
+            className={classes.renderingComponentContainer}
+            style={{ transform: `scaleX(${model.scaleFactor})` }}
           >
-            <DisplayBlurb model={display} />
+            <RenderingComponent
+              model={display}
+              onHorizontalScroll={horizontalScroll}
+            />
           </div>
-        ) : null}
-      </div>
+
+          {DisplayBlurb ? (
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: display.height - 20,
+              }}
+            >
+              <DisplayBlurb model={display} />
+            </div>
+          ) : null}
+        </div>
+      </ErrorBoundary>
       <div
         className={classes.overlay}
         style={{