From 212402d579fc1604c9b5f636a1bdc8cc41ed448b Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Thu, 26 Jan 2023 15:32:10 -0700
Subject: [PATCH] Add error handling for loadPlugins

---
 .../JBrowseLinearGenomeView.stories.tsx       | 186 +++++++++---------
 1 file changed, 97 insertions(+), 89 deletions(-)

diff --git a/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx b/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx
index 090b6cb37a..f7fe3d8a34 100644
--- a/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx
+++ b/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx
@@ -596,6 +596,7 @@ export const Hg38Exome = () => {
   return <JBrowseLinearGenomeView viewState={state} />
 }
 export const WithExternalPlugins = () => {
+  const [error, setError] = useState<unknown>()
   // usage with buildtime plugins
   // this plugins array is then passed to the createViewState constructor
   //
@@ -610,108 +611,115 @@ export const WithExternalPlugins = () => {
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
-      const loadedPlugins = await loadPlugins([
-        {
-          name: 'UCSC',
-          url: 'https://unpkg.com/jbrowse-plugin-ucsc@^1/dist/jbrowse-plugin-ucsc.umd.production.min.js',
-        },
-      ])
-      setPlugins(loadedPlugins)
+      try {
+        const loadedPlugins = await loadPlugins([
+          {
+            name: 'UCSC',
+            url: 'https://unpkg.com/jbrowse-plugin-ucsc@^1/dist/jbrowse-plugin-ucsc.umd.production.min.js',
+          },
+        ])
+        setPlugins(loadedPlugins)
+      } catch (e) {
+        setError(e)
+      }
     })()
   }, [setPlugins])
 
-  if (!plugins) {
-    return null
-  }
-
-  const state = createViewState({
-    assembly: {
-      name: 'hg19',
-      aliases: ['GRCh37'],
-      sequence: {
-        type: 'ReferenceSequenceTrack',
-        trackId: 'Pd8Wh30ei9R',
-        adapter: {
-          type: 'BgzipFastaAdapter',
-          fastaLocation: {
-            uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz',
-            locationType: 'UriLocation',
-          },
-          faiLocation: {
-            uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz.fai',
-            locationType: 'UriLocation',
-          },
-          gziLocation: {
-            uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz.gzi',
-            locationType: 'UriLocation',
+  return error ? (
+    <div style={{ color: 'red' }}>{`${error}`}</div>
+  ) : !plugins ? (
+    <div>Loading plugins...</div>
+  ) : (
+    <JBrowseLinearGenomeView
+      viewState={createViewState({
+        assembly: {
+          name: 'hg19',
+          aliases: ['GRCh37'],
+          sequence: {
+            type: 'ReferenceSequenceTrack',
+            trackId: 'Pd8Wh30ei9R',
+            adapter: {
+              type: 'BgzipFastaAdapter',
+              fastaLocation: {
+                uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz',
+                locationType: 'UriLocation',
+              },
+              faiLocation: {
+                uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz.fai',
+                locationType: 'UriLocation',
+              },
+              gziLocation: {
+                uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz.gzi',
+                locationType: 'UriLocation',
+              },
+            },
           },
-        },
-      },
-      refNameAliases: {
-        adapter: {
-          type: 'RefNameAliasAdapter',
-          location: {
-            uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/hg19/hg19_aliases.txt',
-            locationType: 'UriLocation',
+          refNameAliases: {
+            adapter: {
+              type: 'RefNameAliasAdapter',
+              location: {
+                uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/hg19/hg19_aliases.txt',
+                locationType: 'UriLocation',
+              },
+            },
           },
         },
-      },
-    },
-    plugins: plugins.map(p => p.plugin),
-    tracks: [
-      {
-        type: 'FeatureTrack',
-        trackId: 'segdups_ucsc_hg19',
-        name: 'UCSC SegDups',
-        category: ['Annotation'],
-        assemblyNames: ['hg19'],
-        adapter: {
-          type: 'UCSCAdapter',
-          track: 'genomicSuperDups',
-        },
-      },
-    ],
-    location: '1:2,467,681..2,667,681',
-    defaultSession: {
-      name: 'Runtime plugins',
-      view: {
-        id: 'aU9Nqje1U',
-        type: 'LinearGenomeView',
-        offsetPx: 22654,
-        bpPerPx: 108.93300653594771,
-        displayedRegions: [
-          {
-            refName: '1',
-            start: 0,
-            end: 249250621,
-            reversed: false,
-            assemblyName: 'hg19',
-          },
-        ],
+        plugins: plugins?.map(p => p.plugin) || [],
         tracks: [
           {
-            id: 'MbiRphmDa',
             type: 'FeatureTrack',
-            configuration: 'segdups_ucsc_hg19',
-            displays: [
+            trackId: 'segdups_ucsc_hg19',
+            name: 'UCSC SegDups',
+            category: ['Annotation'],
+            assemblyNames: ['hg19'],
+            adapter: {
+              type: 'UCSCAdapter',
+              track: 'genomicSuperDups',
+            },
+          },
+        ],
+        location: '1:2,467,681..2,667,681',
+        defaultSession: {
+          name: 'Runtime plugins',
+          view: {
+            id: 'aU9Nqje1U',
+            type: 'LinearGenomeView',
+            offsetPx: 22654,
+            bpPerPx: 108.93300653594771,
+            displayedRegions: [
               {
-                id: '8ovhuA5cFM',
-                type: 'LinearBasicDisplay',
-                height: 100,
-                configuration: 'segdups_ucsc_hg19-LinearBasicDisplay',
+                refName: '1',
+                start: 0,
+                end: 249250621,
+                reversed: false,
+                assemblyName: 'hg19',
+              },
+            ],
+            tracks: [
+              {
+                id: 'MbiRphmDa',
+                type: 'FeatureTrack',
+                configuration: 'segdups_ucsc_hg19',
+                displays: [
+                  {
+                    id: '8ovhuA5cFM',
+                    type: 'LinearBasicDisplay',
+                    height: 100,
+                    configuration: 'segdups_ucsc_hg19-LinearBasicDisplay',
+                  },
+                ],
               },
             ],
+            hideHeader: false,
+            hideHeaderOverview: false,
+            trackSelectorType: 'hierarchical',
+            trackLabels: 'overlapping',
+            showCenterLine: false,
           },
-        ],
-        hideHeader: false,
-        hideHeaderOverview: false,
-        trackSelectorType: 'hierarchical',
-        trackLabels: 'overlapping',
-        showCenterLine: false,
-      },
-    },
-  })
-  return <JBrowseLinearGenomeView viewState={state} />
+        },
+      })}
+    />
+  )
 }
 
 export const WithInternetAccounts = () => {