Use internal component for displaying an error if data loading fails

pkalita-lbl · pkalita-lbl · commit e3e36c7a5e5e · 2025-09-30T16:48:21.000-07:00
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -318,6 +318,13 @@ export namespace Components {
          */
         "subjects"?: string;
     }
+    /**
+     * A component that displays an error message when GO data fails to load.
+     */
+    interface GoDataLoadError {
+        "componentName": string;
+        "error": Error;
+    }
     /**
      * The Entity Autocomplete component provides an input field that allows users to search for
      * entities (genes or GO terms) using the GO API.
@@ -515,6 +522,15 @@ declare global {
         prototype: HTMLGoAnnotationRibbonTableElement;
         new (): HTMLGoAnnotationRibbonTableElement;
     };
+    /**
+     * A component that displays an error message when GO data fails to load.
+     */
+    interface HTMLGoDataLoadErrorElement extends Components.GoDataLoadError, HTMLStencilElement {
+    }
+    var HTMLGoDataLoadErrorElement: {
+        prototype: HTMLGoDataLoadErrorElement;
+        new (): HTMLGoDataLoadErrorElement;
+    };
     interface HTMLGoEntityAutocompleteElementEventMap {
         "itemSelected": any;
     }
@@ -618,6 +634,7 @@ declare global {
         "go-annotation-ribbon-strips": HTMLGoAnnotationRibbonStripsElement;
         "go-annotation-ribbon-subject": HTMLGoAnnotationRibbonSubjectElement;
         "go-annotation-ribbon-table": HTMLGoAnnotationRibbonTableElement;
+        "go-data-load-error": HTMLGoDataLoadErrorElement;
         "go-entity-autocomplete": HTMLGoEntityAutocompleteElement;
         "go-gocam-viewer": HTMLGoGocamViewerElement;
         "go-gocam-viewer-legend": HTMLGoGocamViewerLegendElement;
@@ -953,6 +970,13 @@ declare namespace LocalJSX {
          */
         "subjects"?: string;
     }
+    /**
+     * A component that displays an error message when GO data fails to load.
+     */
+    interface GoDataLoadError {
+        "componentName"?: string;
+        "error"?: Error;
+    }
     /**
      * The Entity Autocomplete component provides an input field that allows users to search for
      * entities (genes or GO terms) using the GO API.
@@ -1048,6 +1072,7 @@ declare namespace LocalJSX {
         "go-annotation-ribbon-strips": GoAnnotationRibbonStrips;
         "go-annotation-ribbon-subject": GoAnnotationRibbonSubject;
         "go-annotation-ribbon-table": GoAnnotationRibbonTable;
+        "go-data-load-error": GoDataLoadError;
         "go-entity-autocomplete": GoEntityAutocomplete;
         "go-gocam-viewer": GoGocamViewer;
         "go-gocam-viewer-legend": GoGocamViewerLegend;
@@ -1091,6 +1116,10 @@ declare module "@stencil/core" {
              * fetch data by itself, it expects the data to be provided in the `data` attribute.
              */
             "go-annotation-ribbon-table": LocalJSX.GoAnnotationRibbonTable & JSXBase.HTMLAttributes<HTMLGoAnnotationRibbonTableElement>;
+            /**
+             * A component that displays an error message when GO data fails to load.
+             */
+            "go-data-load-error": LocalJSX.GoDataLoadError & JSXBase.HTMLAttributes<HTMLGoDataLoadErrorElement>;
             /**
              * The Entity Autocomplete component provides an input field that allows users to search for
              * entities (genes or GO terms) using the GO API.
diff --git a/packages/web-components/src/components/annotation-ribbon/annotation-ribbon.scss b/packages/web-components/src/components/annotation-ribbon/annotation-ribbon.scss
@@ -197,7 +197,3 @@ go-spinner {
   font-style: italic;
   color: #7b7b7b;
 }
-
-.error {
-  color: darkred;
-}
diff --git a/packages/web-components/src/components/annotation-ribbon/annotation-ribbon.tsx b/packages/web-components/src/components/annotation-ribbon/annotation-ribbon.tsx
@@ -40,10 +40,10 @@ export class AnnotationRibbon {
 
   @State() ribbonData?: RibbonData;
   @State() ribbonDataLoading = false;
-  @State() ribbonDataLoadingError = false;
+  @State() ribbonDataLoadingError: Error | undefined = undefined;
 
   @State() tableDataLoading = false;
-  @State() tableDataLoadingError = false;
+  @State() tableDataLoadingError: Error | undefined = undefined;
 
   /**
    * URL for the API endpoint to fetch the ribbon data when subjects are provided.
@@ -206,7 +206,7 @@ export class AnnotationRibbon {
     if (!this.subjects) {
       this.ribbonData = undefined;
       this.ribbonDataLoading = false;
-      this.ribbonDataLoadingError = false;
+      this.ribbonDataLoadingError = undefined;
       void this.stripsElement.setData(this.ribbonData);
       return void this.tableElement.setData(undefined);
     }
@@ -224,16 +224,15 @@ export class AnnotationRibbon {
 
     try {
       this.ribbonDataLoading = true;
-      this.ribbonDataLoadingError = false;
+      this.ribbonDataLoadingError = undefined;
       this.ribbonData = await getRibbonSummary(
         this.ribbonDataApiEndpoint,
         this.subjects,
         this.subset,
       );
       return this.stripsElement.setData(this.ribbonData);
-    } catch (error) {
-      console.error("Error loading ribbon data:", error);
-      this.ribbonDataLoadingError = true;
+    } catch (error: unknown) {
+      this.ribbonDataLoadingError = error as Error;
     } finally {
       this.ribbonDataLoading = false;
     }
@@ -253,7 +252,7 @@ export class AnnotationRibbon {
     try {
       await this.tableElement.setData(undefined);
       this.tableDataLoading = true;
-      this.tableDataLoadingError = false;
+      this.tableDataLoadingError = undefined;
       const tableData = await getTableData(
         this.tableDataApiEndpoint,
         subjectIds,
@@ -283,9 +282,8 @@ export class AnnotationRibbon {
         );
       }
       await this.tableElement.setData(tableData);
-    } catch (error) {
-      console.error("Error loading table data:", error);
-      this.tableDataLoadingError = true;
+    } catch (error: unknown) {
+      this.tableDataLoadingError = error as Error;
       await this.tableElement.setData(undefined);
     } finally {
       this.tableDataLoading = false;
@@ -364,7 +362,10 @@ export class AnnotationRibbon {
         />
         {this.ribbonDataLoading && <go-spinner />}
         {this.ribbonDataLoadingError && (
-          <div class="error">Error loading ribbon data.</div>
+          <go-data-load-error
+            componentName={this.constructor.name}
+            error={this.ribbonDataLoadingError}
+          />
         )}
 
         {this.ribbonData && (
@@ -385,7 +386,10 @@ export class AnnotationRibbon {
           excludeProteinBinding={this.excludeProteinBinding}
         />
         {this.tableDataLoadingError && (
-          <div class="error">Error loading table data.</div>
+          <go-data-load-error
+            componentName={this.constructor.name}
+            error={this.tableDataLoadingError}
+          />
         )}
       </Host>
     );
diff --git a/packages/web-components/src/components/data-load-error/data-load-error.scss b/packages/web-components/src/components/data-load-error/data-load-error.scss
@@ -0,0 +1,25 @@
+$background: #fff5f5;
+$border: #dbbdbd;
+$text: #721c24;
+
+.error {
+  border: 1px solid $border;
+  border-radius: 4px;
+  background: $background;
+  color: $text;
+  padding: 1em;
+
+  .error-header {
+    font-weight: bold;
+    padding-bottom: 1em;
+    border-bottom: 1px solid $border;
+  }
+
+  p {
+    margin: 1em 0;
+  }
+
+  pre {
+    margin: 0;
+  }
+}
diff --git a/packages/web-components/src/components/data-load-error/data-load-error.tsx b/packages/web-components/src/components/data-load-error/data-load-error.tsx
@@ -0,0 +1,48 @@
+import { Component, h, Prop } from "@stencil/core";
+import { HTTPError, TimeoutError } from "ky";
+
+/**
+ * A component that displays an error message when GO data fails to load.
+ *
+ * @internal
+ */
+@Component({
+  tag: "go-data-load-error",
+  styleUrl: "data-load-error.scss",
+  shadow: true,
+})
+export class DataLoadError {
+  @Prop() componentName: string;
+  @Prop() error: Error;
+
+  render() {
+    let details = `Host page:   ${window.location.href}
+Component:   ${this.componentName}`;
+    if (this.error instanceof HTTPError || this.error instanceof TimeoutError) {
+      details += `
+API request: ${this.error.request.method} ${this.error.request.url}`;
+    }
+    return (
+      <div class="error">
+        <div class="error-header">
+          <b>Failed to load GO data</b>
+        </div>
+        <div>
+          <p>
+            Please try again later. If the issue persists visit the{" "}
+            <a
+              href="https://help.geneontology.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GO Helpdesk
+            </a>{" "}
+            to report the problem. Include the following information in your
+            report:
+          </p>
+          <pre>{details}</pre>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/packages/web-components/src/components/gocam-viewer/gocam-viewer.scss b/packages/web-components/src/components/gocam-viewer/gocam-viewer.scss
@@ -77,6 +77,8 @@
    * @prop --node-align-items: Align-items of related node info
    *
    * @prop --function-nodes-padding: Padding of related nodes container in processes and activities panel
+   *
+   * @prop --loading-spinner-size: Size of loading spinner shown while loading GO-CAM data
    */
   --border-color: rgba(0, 0, 0, 0.125);
 
@@ -143,6 +145,8 @@
   @include standard-var-declarations(node, $border-color: var(--border-color));
 
   --function-nodes-padding: 0;
+
+  --loading-spinner-size: 2em;
 }
 
 .gocam-graph-and-activities-container {
@@ -206,6 +210,9 @@ button {
   height: var(--graph-height);
   box-sizing: border-box;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 go-gocam-viewer-legend {
@@ -227,3 +234,7 @@ go-gocam-viewer-sidebar {
 go-info-popover {
   padding: 0 0.6em;
 }
+
+go-spinner {
+  --size: var(--loading-spinner-size);
+}
diff --git a/packages/web-components/src/components/gocam-viewer/gocam-viewer.tsx b/packages/web-components/src/components/gocam-viewer/gocam-viewer.tsx
@@ -87,7 +87,7 @@ export class GocamViewer {
   /**
    * Indicates if the component has encountered an error while loading some data
    */
-  @State() error: boolean = false;
+  @State() error: Error | undefined = undefined;
 
   configService = new NoctuaFormConfigService();
 
@@ -293,14 +293,14 @@ export class GocamViewer {
   /**
    * Will request the gocam from the bbop manager; if manager approves, will trigger renderGoCam
    */
-  loadGoCam() {
+  async loadGoCam() {
     if (!this.gocamId || !this.apiUrl) {
       return;
     }
 
     this.graphDiv.innerHTML = "";
     this.loading = true;
-    this.error = false;
+    this.error = undefined;
     this.cam = undefined;
 
     let gocamCurie = this.gocamId;
@@ -309,14 +309,17 @@ export class GocamViewer {
     }
     const url = this.apiUrl.replace("%ID", gocamCurie);
 
-    ky.get(url)
-      .json()
-      .then((graph: any) => {
-        const model = graph.activeModel ?? graph;
-        if (model) {
-          this.setModelData(model);
-        }
-      });
+    try {
+      const graph: any = await ky.get(url).json();
+      const model = graph.activeModel ?? graph;
+      if (model) {
+        this.setModelData(model);
+      }
+    } catch (error: unknown) {
+      this.error = error as Error;
+    } finally {
+      this.loading = false;
+    }
   }
 
   renderGoCam(cam: Cam, expandComplex = false, layout = "dagre") {
@@ -759,6 +762,15 @@ export class GocamViewer {
       this.genesPanel.parentCy = this.cy;
     }
 
+    if (this.error) {
+      return (
+        <go-data-load-error
+          componentName={this.constructor.name}
+          error={this.error}
+        />
+      );
+    }
+
     return (
       <Host>
         <div class="gocam-graph-and-activities-container">
diff --git a/website/docs/components/gocam-viewer/readme.md b/website/docs/components/gocam-viewer/readme.md
@@ -144,6 +144,7 @@ Type: `Promise<void>`
 | `--legend-header-padding`       | Padding of legend header                                                             |
 | `--legend-margin`               | Margin of legend container                                                           |
 | `--legend-padding`              | Padding of legend container                                                          |
+| `--loading-spinner-size`        | Size of loading spinner shown while loading GO-CAM data                              |
 | `--node-align-items`            | Align-items of related node info                                                     |
 | `--node-background`             | Background of related node info in processes and activities panel                    |
 | `--node-border-color`           | Border color of related node info in processes and activities panel                  |

Original file line number	Diff line number	Diff line change
`@@ -197,7 +197,3 @@ go-spinner {`
`197`	`197`	`font-style: italic;`
`198`	`198`	`color: #7b7b7b;`
`199`	`199`	`}`
`200`		`-`
`201`		`-.error {`
`202`		`- color: darkred;`
`203`		`-}`