feat(errorBoundary): added vis boundary

apps/web/src/app/App.tsx

@@ -23,7 +23,7 @@ import { SideNavTab, Sidebar } from '@graphpolaris/shared/lib/sidebar';
 import { InspectorPanel } from '@graphpolaris/shared/lib/inspector';
 import { SearchBar } from '@graphpolaris/shared/lib/sidebar/search/SearchBar';
 import { Schema } from '@graphpolaris/shared/lib/schema/panel';
-import { ErrorBoundary } from '../components/ErrorBoundary/ErrorBoundary';
+import { ErrorBoundary } from '@graphpolaris/shared/lib/components/ErrorBoundary/ErrorBoundary';
 
 export type App = {
   load?: string;

apps/web/tsconfig.json

@@ -45,7 +45,7 @@
     "postcss.config.js", // excludes PostCSS configuration file
     "tsconfig.tsbuildinfo" // excludes TypeScript build info file
   ],
-  "include": ["vite.config.ts", "src/**/*"],
+  "include": ["vite.config.ts", "src/**/*", "../../libs/shared/lib/components/ErrorBoundary"],
   "files": ["vite.config.ts"],
   "references": []
 }

apps/web/src/components/ErrorBoundary/ErrorBoundary.tsx → libs/shared/lib/components/ErrorBoundary/ErrorBoundary.tsx

-import { Button } from '@graphpolaris/shared';
 import React, { ReactNode } from 'react';
+import { Button } from '../buttons';
 
 interface ErrorBoundaryProps {
   fallback: ReactNode;

libs/shared/lib/vis/components/VisualizationPanel.tsx

@@ -15,6 +15,7 @@ import { Recommender, NoData, Querying } from '../views';
 import { resultSetFocus, resultSetSelection, unSelect } from '../../data-access/store/interactionSlice';
 import { updateVisualization, addVisualization } from '../../data-access/store/visualizationSlice';
 import { VisualizationPropTypes, VISComponentType } from '../common';
+import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 
 type PromiseFunc = () => Promise<{ default: VISComponentType<any> }>;
 export const Visualizations: Record<string, PromiseFunc> = {
@@ -84,37 +85,39 @@ export const VisualizationPanel = ({ fullSize }: { fullSize: () => void }) => {
       onMouseDownCapture={() => dispatch(resultSetFocus({ focusType: 'visualization' }))}
     >
       <VisualizationTabBar fullSize={fullSize} />
-      <div className="grow overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
-        {graphQueryResult.queryingBackend ? (
-          <Querying />
-        ) : graphQueryResult.nodes.length === 0 ? (
-          <NoData dataAvailable={query.nodes.length > 0} />
-        ) : openVisualizationArray.length === 0 ? (
-          <Recommender />
-        ) : (
-          <div className="w-full h-full flex">
-            <Suspense fallback={<div>Loading...</div>}>
-              {!!viz &&
-                activeVisualizationIndex !== -1 &&
-                openVisualizationArray?.[activeVisualizationIndex] &&
-                viz.id === openVisualizationArray[activeVisualizationIndex].id &&
-                graphMetadata && (
-                  <viz.component
-                    data={graphQueryResult}
-                    schema={schema}
-                    ml={ml}
-                    settings={openVisualizationArray[activeVisualizationIndex]}
-                    dispatch={dispatch}
-                    handleSelect={handleSelect}
-                    graphMetadata={graphMetadata}
-                    updateSettings={updateSettings}
-                    handleHover={() => {}}
-                  />
-                )}
-            </Suspense>
-          </div>
-        )}
-      </div>
+      <ErrorBoundary fallback={<p>Visualization component failed</p>}>
+        <div className="grow overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
+          {graphQueryResult.queryingBackend ? (
+            <Querying />
+          ) : graphQueryResult.nodes.length === 0 ? (
+            <NoData dataAvailable={query.nodes.length > 0} />
+          ) : openVisualizationArray.length === 0 ? (
+            <Recommender />
+          ) : (
+            <div className="w-full h-full flex">
+              <Suspense fallback={<div>Loading...</div>}>
+                {!!viz &&
+                  activeVisualizationIndex !== -1 &&
+                  openVisualizationArray?.[activeVisualizationIndex] &&
+                  viz.id === openVisualizationArray[activeVisualizationIndex].id &&
+                  graphMetadata && (
+                    <viz.component
+                      data={graphQueryResult}
+                      schema={schema}
+                      ml={ml}
+                      settings={openVisualizationArray[activeVisualizationIndex]}
+                      dispatch={dispatch}
+                      handleSelect={handleSelect}
+                      graphMetadata={graphMetadata}
+                      updateSettings={updateSettings}
+                      handleHover={() => {}}
+                    />
+                  )}
+              </Suspense>
+            </div>
+          )}
+        </div>
+      </ErrorBoundary>
     </div>
   );
 };