allow loading the app even when plugins fails to load

app/packages/app/src/Sync.tsx

@@ -29,11 +29,11 @@ import {
   type OperationType,
 } from "relay-runtime";
 import Setup from "./components/Setup";
+import type { IndexPageQuery } from "./pages/__generated__/IndexPageQuery.graphql";
 import type {
   DatasetPageQuery,
   DatasetPageQuery$data,
 } from "./pages/datasets/__generated__/DatasetPageQuery.graphql";
-import type { IndexPageQuery } from "./pages/__generated__/IndexPageQuery.graphql";
 import { useRouterContext, type Entry } from "./routing";
 import { AppReadyState } from "./useEvents/registerEvent";
 import useEventSource from "./useEventSource";
@@ -45,8 +45,6 @@ export const SessionContext = React.createContext<Session>(SESSION_DEFAULT);
 const Plugins = ({ children }: { children: React.ReactNode }) => {
   const plugins = usePlugins();
   if (plugins.isLoading) return <Loading>Pixelating...</Loading>;
-  if (plugins.hasError) return <Loading>Plugin error...</Loading>;
-
   return <>{children}</>;
 };
 

app/packages/core/src/components/Starter/index.tsx

@@ -5,6 +5,7 @@ import {
   useOperatorExecutor,
   usePromptOperatorInput,
 } from "@fiftyone/operators/src/state";
+import { datasetName as datasetNameAtom } from "@fiftyone/state";
 import {
   Button,
   ButtonProps,
@@ -15,9 +16,8 @@ import {
   Typography,
 } from "@mui/material";
 import React, { useCallback, useMemo } from "react";
-import { CONTENT_BY_MODE } from "./content";
 import { useRecoilValue } from "recoil";
-import { datasetName as datasetNameAtom } from "@fiftyone/state";
+import { CONTENT_BY_MODE } from "./content";
 
 const CREATE_DATASET_OPERATOR = "@voxel51/utils/create_dataset";
 const IMPORT_SAMPLES_OPERATOR = "@voxel51/io/import_samples";
@@ -30,12 +30,12 @@ const INSTALL_IO_PLUGIN_LABEL = "@voxel51/io";
 
 export function Starter(props: StarterPropsType) {
   const { mode } = props;
-  const ready = useOperators(true);
+  const { isLoading } = useOperators(true);
   const datasetName = useRecoilValue(datasetNameAtom);
 
   if (!mode) return null;
 
-  if (!ready) return <Loading>Pixelating...</Loading>;
+  if (isLoading) return <Loading>Pixelating...</Loading>;
 
   const { code, codeTitle, learnMoreLabel, learnMoreLink, title } =
     CONTENT_BY_MODE[mode];

app/packages/operators/src/loader.tsx

@@ -27,7 +27,8 @@ async function loadOperators(datasetName: string) {
  *  start-up operators for execution.
  */
 export function useOperators(datasetLess?: boolean) {
-  const [ready, setReady] = useState(false);
+  const [state, setState] = useState<"loading" | "error" | "ready">("loading");
+  const [error, setError] = useState<Error | null>(null);
   const datasetName = useRecoilValue(datasetNameAtom);
   const setAvailableOperatorsRefreshCount = useSetRecoilState(
     availableOperatorsRefreshCount
@@ -37,12 +38,17 @@ export function useOperators(datasetLess?: boolean) {
 
   useEffect(() => {
     if (isPrimitiveString(datasetName) || datasetLess) {
-      loadOperators(datasetName).then(() => {
-        // trigger force refresh
-        setAvailableOperatorsRefreshCount((count) => count + 1);
-        setReady(true);
-        setOperatorsInitialized(true);
-      });
+      loadOperators(datasetName)
+        .then(() => {
+          // trigger force refresh
+          setAvailableOperatorsRefreshCount((count) => count + 1);
+          setState("ready");
+          setOperatorsInitialized(true);
+        })
+        .catch((error) => {
+          setState("error");
+          setError(error);
+        });
     }
   }, [
     datasetLess,
@@ -51,5 +57,11 @@ export function useOperators(datasetLess?: boolean) {
     setOperatorsInitialized,
   ]);
 
-  return ready && (initialized || datasetLess);
+  return {
+    ready: state === "ready" && (initialized || datasetLess),
+    hasError: state === "error",
+    isLoading: state === "loading",
+    error,
+    state,
+  };
 }

app/packages/plugins/src/index.ts

@@ -113,7 +113,7 @@ export async function loadPlugins() {
     if (plugin.hasJS) {
       const name = plugin.name;
       const scriptPath = plugin.jsBundleServerPath;
-      const cacheKey = plugin.jsBundleHash ? `?h=${plugin.jsBundleHash}` : '';
+      const cacheKey = plugin.jsBundleHash ? `?h=${plugin.jsBundleHash}` : "";
       if (usingRegistry().hasScript(name)) {
         console.debug(`Plugin "${name}": already loaded`);
         continue;
@@ -157,11 +157,22 @@ async function loadScript(name, url) {
 export function usePlugins() {
   const datasetName = recoil.useRecoilValue(fos.datasetName);
   const [state, setState] = recoil.useRecoilState(pluginsLoaderAtom);
-  const operatorsReady = useOperators(datasetName === null);
+  const notify = fos.useNotification();
+  const {
+    ready: operatorsReady,
+    hasError: operatorHasError,
+    isLoading: operatorIsLoading,
+  } = useOperators(datasetName === null);
 
   useEffect(() => {
     loadPlugins()
       .catch(() => {
+        notify({
+          msg:
+            "Failed to initialize Python plugins. You may not be able to use" +
+            " panels, operators, and other artifacts of plugins installed.",
+          variant: "error",
+        });
         setState("error");
       })
       .then(() => {
@@ -170,8 +181,8 @@ export function usePlugins() {
   }, [setState]);
 
   return {
-    isLoading: state === "loading" || !operatorsReady,
-    hasError: state === "error",
+    isLoading: state === "loading" || operatorIsLoading,
+    hasError: state === "error" || operatorHasError,
     ready: state === "ready" && operatorsReady,
   };
 }

app/packages/spaces/src/components/Workspaces/hooks.ts

@@ -5,15 +5,17 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useRecoilState, useRecoilValue, useResetRecoilState } from "recoil";
 import { savedWorkspacesAtom } from "../../state";
 import { LIST_WORKSPACES_OPERATOR, LOAD_WORKSPACE_OPERATOR } from "./constants";
+import { operatorsInitializedAtom } from "@fiftyone/operators/src/state";
 
 export function useWorkspaces() {
   const [state, setState] = useRecoilState(savedWorkspacesAtom);
   const resetState = useResetRecoilState(savedWorkspacesAtom);
   const [listWorkspaceExecuting, setListWorkspaceExecuting] = useState(false);
   const currentDataset = useRecoilValue(datasetName);
+  const operatorsInitialized = useRecoilValue(operatorsInitializedAtom);
 
   const listWorkspace = useCallback(() => {
-    if (listWorkspaceExecuting) return;
+    if (listWorkspaceExecuting || !operatorsInitialized) return;
     setListWorkspaceExecuting(true);
     executeOperator(
       LIST_WORKSPACES_OPERATOR,
@@ -24,7 +26,7 @@ export function useWorkspaces() {
             return {
               ...state,
               initialized: true,
-              workspaces: result?.result?.workspaces,
+              workspaces: result?.result?.workspaces || [],
               dataset: currentDataset,
             };
           });
@@ -36,7 +38,7 @@ export function useWorkspaces() {
         skipOutput: true,
       }
     );
-  }, [listWorkspaceExecuting, setState, currentDataset]);
+  }, [listWorkspaceExecuting, setState, currentDataset, operatorsInitialized]);
 
   const loadWorkspace = useCallback((name: string) => {
     executeOperator(LOAD_WORKSPACE_OPERATOR, { name }, { skipOutput: true });
@@ -59,5 +61,6 @@ export function useWorkspaces() {
     listWorkspace,
     reset: resetState,
     existingSlugs,
+    canInitialize: operatorsInitialized,
   };
 }

app/packages/spaces/src/components/Workspaces/index.tsx

@@ -25,8 +25,13 @@ import { useWorkspaces } from "./hooks";
 export default function Workspaces() {
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const { workspaces, loadWorkspace, initialized, listWorkspace } =
-    useWorkspaces();
+  const {
+    workspaces,
+    loadWorkspace,
+    initialized,
+    listWorkspace,
+    canInitialize,
+  } = useWorkspaces();
   const setWorkspaceEditorState = useSetRecoilState(workspaceEditorStateAtom);
   const canEditWorkSpace = useRecoilValue(canEditWorkspaces);
   const disabled = canEditWorkSpace.enabled !== true;
@@ -45,10 +50,12 @@ export default function Workspaces() {
   }, [workspaces, searchTerm]);
 
   useEffect(() => {
-    if (!initialized) {
+    if (!initialized && canInitialize) {
       listWorkspace();
     }
-  }, [open, initialized, listWorkspace]);
+  }, [open, initialized, listWorkspace, canInitialize]);
+
+  if (!canInitialize) return null;
 
   return (
     <Box>