Make View closable on errorboundary

GMOD · Nov 14, 2022 · f4e3e6e · f4e3e6e
1 parent e8cec06
commit f4e3e6e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/component_tests/cgv/package.json b/component_tests/cgv/package.json
@@ -31,6 +31,7 @@
     "@jbrowse/plugin-circular-view": "file:./packed/jbrowse-plugin-circular-view.tgz",
     "@jbrowse/plugin-config": "file:./packed/jbrowse-plugin-config.tgz",
     "@jbrowse/plugin-data-management": "file:./packed/jbrowse-plugin-data-management.tgz",
+    "@jbrowse/plugin-gccontent": "file:./packed/jbrowse-plugin-gccontent.tgz",
     "@jbrowse/plugin-gff3": "file:./packed/jbrowse-plugin-gff3.tgz",
     "@jbrowse/plugin-linear-genome-view": "file:./packed/jbrowse-plugin-linear-genome-view.tgz",
     "@jbrowse/plugin-sequence": "file:./packed/jbrowse-plugin-sequence.tgz",

diff --git a/packages/core/ui/App.tsx b/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} />