Fix trajectory fetch error handling and add loading/error UI

src/App.tsx

@@ -502,12 +502,16 @@ function App() {
                     setTrajectoryStatus(TrajectoryStatus.LOADING);
                     clearAllAnalysisState();
 
-                    await fetch3DTrajectory(
+                    const didSucceed = await fetch3DTrajectory(
                         url,
                         simulariumController,
                         setPreComputedTrajectoryPlotData,
                     );
-                    setTrajectoryStatus(TrajectoryStatus.LOADED);
+                    setTrajectoryStatus(
+                        didSucceed
+                            ? TrajectoryStatus.LOADED
+                            : TrajectoryStatus.ERROR,
+                    );
                 };
                 changeTrajectory();
             }
@@ -784,11 +788,13 @@ function App() {
             maxConcentration: simulationData.getMaxConcentration(currentModule),
             productName,
             setIsPlaying,
+            setTrajectoryStatus,
             setViewportSize,
             simulariumController,
             timeFactor,
             timeUnit: simulationData.timeUnit,
             trajectoryName,
+            trajectoryStatus,
             viewportSize,
         }),
         [
@@ -808,6 +814,7 @@ function App() {
             simulationData,
             timeFactor,
             trajectoryName,
+            trajectoryStatus,
             viewportSize,
         ],
     );

src/components/Viewer.tsx

@@ -5,14 +5,17 @@ import SimulariumViewer, {
     TimeData,
 } from "@aics/simularium-viewer";
 import "@aics/simularium-viewer/style/style.css";
+import { Spin } from "antd";
 
+import { LIVE_SIMULATION_NAME } from "../constants";
 import {
     useSimulariumSimulation,
     useSimulariumUi,
 } from "../hooks/useSimulationContext";
-import styles from "./viewer.module.css";
 import useWindowResize from "../hooks/useWindowResize";
-import { LIVE_SIMULATION_NAME } from "../constants";
+import { TrajectoryStatus } from "../types";
+import { SecondaryButton } from "./shared/ButtonLibrary";
+import styles from "./viewer.module.css";
 
 interface ViewerProps {
     handleTimeChange: (timeData: TimeData) => void;
@@ -34,11 +37,13 @@ export default function Viewer({ handleTimeChange }: ViewerProps): ReactNode {
     });
     const container = useRef<HTMLDivElement>(null);
     const {
-        viewportSize,
+        handleTrajectoryChange,
+        setTrajectoryStatus,
         setViewportSize,
         simulariumController,
-        handleTrajectoryChange,
         trajectoryName,
+        trajectoryStatus,
+        viewportSize,
     } = useSimulariumSimulation();
     const { page } = useSimulariumUi();
 
@@ -122,7 +127,27 @@ export default function Viewer({ handleTimeChange }: ViewerProps): ReactNode {
         </div>
     );
 
-    const showHintOverlay = !userHasInteracted && is3DTrajectory;
+    const loadingOverlay = (
+        <div className={styles.loadingOverlay}>
+            <Spin size="large" />
+        </div>
+    );
+
+    const errorOverlay = (
+        <div className={styles.errorOverlay}>
+            <p>Failed to load this content.</p>
+            <SecondaryButton
+                onClick={() => setTrajectoryStatus(TrajectoryStatus.INITIAL)}
+            >
+                Retry
+            </SecondaryButton>
+        </div>
+    );
+
+    const isLoading = trajectoryStatus === TrajectoryStatus.LOADING;
+    const isError = trajectoryStatus === TrajectoryStatus.ERROR;
+    const showHintOverlay =
+        !userHasInteracted && is3DTrajectory && !isLoading && !isError;
     return (
         <div
             className={classNames([styles.container], {
@@ -132,26 +157,30 @@ export default function Viewer({ handleTimeChange }: ViewerProps): ReactNode {
             ref={container}
         >
             {showHintOverlay && hintOverlay}
-            <SimulariumViewer
-                lockedCamera={trajectoryName === LIVE_SIMULATION_NAME}
-                disableCache={trajectoryName === LIVE_SIMULATION_NAME}
-                renderStyle={RenderStyle.WEBGL2_PREFERRED}
-                height={viewportSize.height}
-                width={viewportSize.width}
-                loggerLevel=""
-                onTimeChange={handleTimeChange}
-                simulariumController={simulariumController}
-                onJsonDataArrived={() => {}}
-                showCameraControls={false}
-                onTrajectoryFileInfoChanged={handleTrajectoryChange}
-                selectionStateInfo={selectionStateInfo}
-                onUIDisplayDataChanged={() => {}}
-                loadInitialData={true}
-                showPaths={true}
-                onError={console.log}
-                backgroundColor={[0, 0, 0]}
-                onRecordedMovie={() => {}}
-            />
+            {isLoading && loadingOverlay}
+            {isError && errorOverlay}
+            {!isError && (
+                <SimulariumViewer
+                    lockedCamera={trajectoryName === LIVE_SIMULATION_NAME}
+                    disableCache={trajectoryName === LIVE_SIMULATION_NAME}
+                    renderStyle={RenderStyle.WEBGL2_PREFERRED}
+                    height={viewportSize.height}
+                    width={viewportSize.width}
+                    loggerLevel=""
+                    onTimeChange={handleTimeChange}
+                    simulariumController={simulariumController}
+                    onJsonDataArrived={() => {}}
+                    showCameraControls={false}
+                    onTrajectoryFileInfoChanged={handleTrajectoryChange}
+                    selectionStateInfo={selectionStateInfo}
+                    onUIDisplayDataChanged={() => {}}
+                    loadInitialData={true}
+                    showPaths={true}
+                    onError={console.log}
+                    backgroundColor={[0, 0, 0]}
+                    onRecordedMovie={() => {}}
+                />
+            )}
         </div>
     );
 }

src/components/viewer.module.css

@@ -34,3 +34,29 @@
     margin-top: 10px;
     z-index: var(--viewer-overlay-layer);
 }
+
+.container .loading-overlay,
+.container .error-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    text-align: center;
+    padding: 16px 24px;
+    z-index: var(--viewer-overlay-layer);
+}
+
+.container .error-overlay {
+    border: 1px solid var(--primary-color);
+    border-radius: 4px;
+    color: var(--text-color);
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.container .error-overlay p {
+    margin: 0;
+}

src/simulation/context.tsx

@@ -10,7 +10,14 @@ import {
     NANO,
     ProgressionElement,
 } from "../constants";
-import { AgentName, Module, ProductName, Section, ViewType } from "../types";
+import {
+    AgentName,
+    Module,
+    ProductName,
+    Section,
+    TrajectoryStatus,
+    ViewType,
+} from "../types";
 
 export interface SimulariumUiContextType {
     addCompletedModule: (value: Module) => void;
@@ -40,11 +47,13 @@ export interface SimulariumSimulationContextType {
     maxConcentration: number;
     productName: ProductName;
     setIsPlaying: (value: boolean) => void;
+    setTrajectoryStatus: (value: TrajectoryStatus) => void;
     setViewportSize: (value: { width: number; height: number }) => void;
     simulariumController: SimulariumController | null;
     timeFactor: number;
     timeUnit: string;
     trajectoryName: string;
+    trajectoryStatus: TrajectoryStatus;
     viewportSize: { width: number; height: number };
 }
 
@@ -82,11 +91,13 @@ export const SimulariumSimulationContext =
         maxConcentration: 10,
         productName: ProductName.AB,
         setIsPlaying: () => {},
+        setTrajectoryStatus: () => {},
         setViewportSize: () => {},
         simulariumController: null,
         timeFactor: 30,
         timeUnit: NANO,
         trajectoryName: LIVE_SIMULATION_NAME,
+        trajectoryStatus: TrajectoryStatus.INITIAL,
         viewportSize: DEFAULT_VIEWPORT_SIZE,
     });
 

src/utils/fetch3DTrajectory.ts

@@ -8,7 +8,7 @@ const fetch3DTrajectory = async (
     url: string,
     simulariumController: SimulariumController,
     setTrajectoryPlotData: (plotData: ScatterTrace[]) => void
-) => {
+): Promise<boolean> => {
     try {
         const response = await fetch(url);
         if (response.ok) {
@@ -22,11 +22,13 @@ const fetch3DTrajectory = async (
             );
             const plotData = simulariumFile.getPlotData();
             setTrajectoryPlotData(plotData[0].data as ScatterTrace[]); // we're not using histograms
+            return true;
         } else {
             throw new Error(`Failed to fetch - ${response.status}`);
         }
     } catch (error) {
         console.log(error);
+        return false;
     }
 };