Fix loading lifecycle flow when getting session (#259)

Co-authored-by: Sebastian Benjamin <sebastiancbenjamin@gmail.com>

Author: bbimber

jbrowse/src/client/JBrowse/VariantSearch/VariantTable.tsx

@@ -45,7 +45,7 @@ function VariantTable() {
 
     const [session, setSession] = useState(null)
     const [state, setState] = useState(null)
-    const [theme, setTheme] = useState(null)
+    const [theme, setTheme] = useState(createTheme())
     const [view, setView] = useState(null)
     const [parsedLocString, setParsedLocString] = useState(null)
     const [assemblyNames, setAssemblyNames] = useState(null)
@@ -86,24 +86,11 @@ function VariantTable() {
         fetchSession(queryParam, sessionId, nativePlugins, refTheme, setState, true, [trackId], undefined, successCallback, trackId)
     }, []);
 
-    // Error handle and then render the component
-    if (view === null || theme == null) {
-        return (<LoadingIndicator isOpen={true}/>)
-    }
-    else if (view === "invalid" || state == "invalid") {
-        return (<p>Error fetching config. See console for more details</p>)
-    }
-
-    if (!assemblyNames.length) {
-        return (<p>No configured assemblies</p>)
-    }
-
     return (
         <ThemeProvider theme={theme}>
         <div style={{height: "80vh", display:"block"}}>
             <ErrorBoundary>
-                <VariantTableWidget assemblyName={assemblyNames[0]} assembly={assembly} trackId={trackId} locString={locString}
-                                    parsedLocString={parsedLocString} sessionId={sessionId} session={session} pluginManager={pluginManager}/>
+                <VariantTableWidget assembly={assembly} trackId={trackId} parsedLocString={parsedLocString} sessionId={sessionId} session={session} pluginManager={pluginManager}/>
             </ErrorBoundary>
         </div>
         </ThemeProvider>

jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx

@@ -36,21 +36,20 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { lastValueFrom } from 'rxjs';
 
 const VariantTableWidget = observer(props => {
-    const { assembly, trackId, parsedLocString, sessionId, session, pluginManager } = props
-    const { assemblyNames, assemblyManager } = session
-    const { view } = session
-
-    // The code expects a proper GUID, yet the trackId is a string containing the GUID + filename
-    const trackGUID = truncateToValidGUID(props.trackId)
-
-    // NOTE: since the trackId is GUID+filename, allow exact string matching, or a match on the GUID portion alone.
-    // Upstream code might only have access to the GUID and translating to the trackId isnt always easy
-    const track = view.tracks.find(
-        t => t.configuration.trackId === trackId || truncateToValidGUID(t.configuration.trackId).toUpperCase() === trackGUID.toUpperCase()
-    )
-
-    if (!track) {
-        return (<p>Unknown track: {trackId}</p>)
+    const { assembly, trackId, parsedLocString, sessionId, session, pluginManager } = props;
+    const { assemblyNames = [], assemblyManager } = session ?? {};
+    const { view } = session ?? {};
+
+    var track = undefined;
+    var trackGUID = undefined;
+    if(view && trackId) {
+        // The code expects a proper GUID, yet the trackId is a string containing the GUID + filename
+        // NOTE: since the trackId is GUID+filename, allow exact string matching, or a match on the GUID portion alone.
+        // Upstream code might only have access to the GUID and translating to the trackId isnt always easy
+        trackGUID = truncateToValidGUID(props.trackId)
+        track = view.tracks.find(
+            t => t.configuration.trackId === trackId || truncateToValidGUID(t.configuration.trackId).toUpperCase() === trackGUID.toUpperCase()
+        )
     }
 
     function handleSearch(data) {
@@ -150,7 +149,6 @@ const VariantTableWidget = observer(props => {
                     <span className='table-cell-truncate'>{displayValue}</span>
                 </Typography>
                 {renderPopover &&
-                        // TODO
                         <Popover
                                 id="mouse-over-popover"
                                 open={open}
@@ -236,7 +234,7 @@ const VariantTableWidget = observer(props => {
     const [activeWidgetList, setActiveWidgetList] = useState<string[]>([])
 
     // False until initial data load or an error:
-    const [dataLoaded, setDataLoaded] = useState(!parsedLocString)
+    const [dataLoaded, setDataLoaded] = useState(false)
 
     const urlParams = new URLSearchParams(window.location.search);
     const page = parseInt(urlParams.get('page') || '0');
@@ -278,20 +276,15 @@ const VariantTableWidget = observer(props => {
                 })
         }
 
-        fetch()
+        if(sessionId && trackGUID) {
+            fetch()
+        }
+
         return () => {
           window.removeEventListener('popstate', handlePopState);
         };
 
-    }, [pluginManager, parsedLocString, session.visibleWidget])
-
-    if (!view) {
-        return
-    }
-
-    if (!track) {
-        return(<p>Unable to find track: {trackId}</p>)
-    }
+    }, [pluginManager, parsedLocString, session?.visibleWidget, sessionId, trackGUID])
 
     if (error) {
         throw new Error(error)
@@ -435,7 +428,7 @@ const VariantTableWidget = observer(props => {
             <LoadingIndicator isOpen={!dataLoaded}/>
 
             {
-                [...session.activeWidgets].map((elem) => {
+                [...(session?.activeWidgets ?? [])].map((elem) => {
                     const widget = elem[1]
                     const widgetType = pluginManager.getWidgetType(widget.type)
                     const { ReactComponent } = widgetType