Merge pull request #4522 from voxel51/feat/panel-not-found

overridable panel not found component

app/packages/plugins/src/index.ts

@@ -230,6 +230,17 @@ export function useActivePlugins(type: PluginComponentType, ctx: any) {
   });
 }
 
+/**
+ * A react hook that returns a component plugin by name if exist.
+ * @param name The name of the plugin
+ * @param ctx Argument passed to the plugin's activator function
+ * @returns The plugin component or `undefined`
+ */
+export function usePluginComponent(name: string, ctx?: unknown) {
+  const plugins = useActivePlugins(PluginComponentType.Component, ctx);
+  return plugins.find((p) => p.name === name);
+}
+
 /**
  * The type of plugin component.
  *

app/packages/spaces/src/components/Panel.tsx

@@ -1,15 +1,16 @@
 import { CenteredStack } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
-import { Typography } from "@mui/material";
 import React from "react";
 import { PANEL_LOADING_TIMEOUT } from "../constants";
 import { PanelContext } from "../contexts";
 import { useReactivePanel } from "../hooks";
 import { PanelProps } from "../types";
+import PanelNotFound from "./PanelNotFound";
 import PanelSkeleton from "./PanelSkeleton";
 import { StyledPanel } from "./StyledElements";
 
-function Panel({ node }: PanelProps) {
+function Panel(props: PanelProps) {
+  const { node } = props;
   const panelName = node.type as string;
   const panel = useReactivePanel(panelName);
   const dimensions = fos.useDimensions();
@@ -22,9 +23,7 @@ function Panel({ node }: PanelProps) {
           {pending ? (
             <PanelSkeleton />
           ) : (
-            <Typography>
-              Panel &quot;{panelName}&quot; no longer exists!
-            </Typography>
+            <PanelNotFound panelName={panelName} {...props} />
           )}
         </CenteredStack>
       </StyledPanel>

app/packages/spaces/src/components/PanelNotFound.tsx

@@ -0,0 +1,18 @@
+import { usePluginComponent } from "@fiftyone/plugins";
+import { Typography } from "@mui/material";
+import { PanelProps } from "../types";
+
+export default function PanelNotFound(props: PanelNotFoundPropsType) {
+  const { panelName } = props;
+  const CustomPanelNotFound = usePluginComponent("PanelNotFound")?.component;
+
+  if (CustomPanelNotFound) {
+    return <CustomPanelNotFound {...props} />;
+  }
+
+  return (
+    <Typography>Panel &quot;{panelName}&quot; no longer exists!</Typography>
+  );
+}
+
+type PanelNotFoundPropsType = PanelProps & { panelName: string };