Notify user when it fails to load network

src/components/NetworkPanel/NetworkPanel.tsx

@@ -15,6 +15,7 @@ import { useRendererStore } from '../../store/RendererStore'
 
 interface NetworkPanelProps {
   networkId: IdType
+  failedToLoad?: boolean
 }
 
 /**
@@ -23,7 +24,10 @@ interface NetworkPanelProps {
  * @param networkId - the ID of the network model to display
  *
  */
-const NetworkPanel = ({ networkId }: NetworkPanelProps): ReactElement => {
+const NetworkPanel = ({
+  networkId,
+  failedToLoad = false,
+}: NetworkPanelProps): ReactElement => {
   const [isActive, setIsActive] = useState<boolean>(false)
 
   const ui = useUiStateStore((state) => state.ui)
@@ -62,6 +66,10 @@ const NetworkPanel = ({ networkId }: NetworkPanelProps): ReactElement => {
     (state) => state.viewModels,
   )
 
+  if (failedToLoad) {
+    return <MessagePanel message="Failed to load network data" />
+  }
+
   if (networks.size === 0) {
     return <MessagePanel message="No network selected" />
   }

src/components/Workspace/WorkspaceEditor.tsx

@@ -87,7 +87,8 @@ const WorkSpaceEditor = (): JSX.Element => {
 
   // Check if the component is initialized
   const isInitializedRef = useRef<boolean>(false)
-
+  // Indicates if a network failed to load
+  const [failedToLoad, setFailedToLoad] = useState<boolean>(false)
   const showTableJoinForm = useJoinTableToNetworkStore((state) => state.setShow)
   const showCreateNetworkFromTableForm = useCreateNetworkFromTableStore(
     (state) => state.setShow,
@@ -288,86 +289,91 @@ const WorkSpaceEditor = (): JSX.Element => {
   }, [])
 
   const loadCurrentNetworkById = async (networkId: IdType): Promise<void> => {
-    const currentToken = await getToken()
+    try {
+      const currentToken = await getToken()
 
-    const summaryMap = await useNdexNetworkSummary(
-      [networkId],
-      ndexBaseUrl,
-      currentToken,
-    )
-    const summary = summaryMap[networkId]
-    const res: NetworkWithView = await useNdexNetwork(
-      networkId,
-      ndexBaseUrl,
-      currentToken,
-    )
-    const {
-      network,
-      nodeTable,
-      edgeTable,
-      visualStyle,
-      networkViews,
-      visualStyleOptions,
-      otherAspects,
-    } = res
-
-    setVisualStyleOptions(networkId, visualStyleOptions)
-    addNewNetwork(network)
-    addVisualStyle(networkId, visualStyle)
-    addTable(networkId, nodeTable, edgeTable)
-    addViewModel(networkId, networkViews[0])
-    if (otherAspects !== undefined) {
-      addAllOpaqueAspects(networkId, otherAspects)
-    }
-
-    if (isHCX(summary)) {
-      const version =
-        summary.properties.find(
-          (p) => p.predicateString === HcxMetaTag.ndexSchema,
-        )?.value ?? ''
-      const validationRes = validateHcx(version as string, summary, nodeTable)
-
-      if (!validationRes.isValid) {
-        addMessage({
-          message: `This network is not a valid HCX network.  Some features may not work properly.`,
-          duration: 8000,
-        })
+      const summaryMap = await useNdexNetworkSummary(
+        [networkId],
+        ndexBaseUrl,
+        currentToken,
+      )
+      const summary = summaryMap[networkId]
+      const res: NetworkWithView = await useNdexNetwork(
+        networkId,
+        ndexBaseUrl,
+        currentToken,
+      )
+      const {
+        network,
+        nodeTable,
+        edgeTable,
+        visualStyle,
+        networkViews,
+        visualStyleOptions,
+        otherAspects,
+      } = res
+
+      setVisualStyleOptions(networkId, visualStyleOptions)
+      addNewNetwork(network)
+      addVisualStyle(networkId, visualStyle)
+      addTable(networkId, nodeTable, edgeTable)
+      addViewModel(networkId, networkViews[0])
+      if (otherAspects !== undefined) {
+        addAllOpaqueAspects(networkId, otherAspects)
       }
-      setValidationResult(networkId, validationRes)
-    }
 
-    if (!summary.hasLayout) {
-      const defaultLayout = getDefaultLayout(
-        summary,
-        network.nodes.length + network.edges.length,
-        maxNetworkElementsThreshold,
-      )
+      if (isHCX(summary)) {
+        const version =
+          summary.properties.find(
+            (p) => p.predicateString === HcxMetaTag.ndexSchema,
+          )?.value ?? ''
+        const validationRes = validateHcx(version as string, summary, nodeTable)
+
+        if (!validationRes.isValid) {
+          addMessage({
+            message: `This network is not a valid HCX network.  Some features may not work properly.`,
+            duration: 8000,
+          })
+        }
+        setValidationResult(networkId, validationRes)
+      }
 
-      if (defaultLayout !== undefined) {
-        const engine: LayoutEngine | undefined = layoutEngines.find(
-          (engine) => engine.name === defaultLayout.engineName,
+      if (!summary.hasLayout) {
+        const defaultLayout = getDefaultLayout(
+          summary,
+          network.nodes.length + network.edges.length,
+          maxNetworkElementsThreshold,
         )
 
-        if (engine !== undefined) {
-          const nextSummary = { ...summary, hasLayout: true }
+        if (defaultLayout !== undefined) {
+          const engine: LayoutEngine | undefined = layoutEngines.find(
+            (engine) => engine.name === defaultLayout.engineName,
+          )
 
-          setIsRunning(true)
-          const afterLayout = (
-            positionMap: Map<IdType, [number, number]>,
-          ): void => {
-            updateNodePositions(networkId, positionMap)
-            updateSummary(networkId, nextSummary)
-            setIsRunning(false)
-          }
+          if (engine !== undefined) {
+            const nextSummary = { ...summary, hasLayout: true }
 
-          engine.apply(
-            network.nodes,
-            network.edges,
-            afterLayout,
-            engine.algorithms[defaultLayout.algorithmName],
-          )
+            setIsRunning(true)
+            const afterLayout = (
+              positionMap: Map<IdType, [number, number]>,
+            ): void => {
+              updateNodePositions(networkId, positionMap)
+              updateSummary(networkId, nextSummary)
+              setIsRunning(false)
+            }
+
+            engine.apply(
+              network.nodes,
+              network.edges,
+              afterLayout,
+              engine.algorithms[defaultLayout.algorithmName],
+            )
+          }
         }
       }
+    } catch (e) {
+      console.error('Failed to load network:', e)
+      setFailedToLoad(true)
     }
   }
 
@@ -485,7 +491,7 @@ const WorkSpaceEditor = (): JSX.Element => {
     }
 
     isLoadingRef.current = true
-
+    setFailedToLoad(false)
     if (currentNetworkView === undefined) {
       loadCurrentNetworkById(currentNetworkId)
         .then(() => {
@@ -616,7 +622,10 @@ const WorkSpaceEditor = (): JSX.Element => {
             </Allotment.Pane>
             <Allotment.Pane>
               <Outlet />
-              <NetworkPanel networkId={currentNetworkId} />
+              <NetworkPanel
+                networkId={currentNetworkId}
+                failedToLoad={failedToLoad}
+              />
             </Allotment.Pane>
           </Allotment>
           <Allotment.Pane