improve jrbowse logic

Author: emiliorighi

front/app/jbrowse/page.tsx

@@ -20,14 +20,15 @@ interface ChromosomeInterface {
 }
 
 function JBrowseContent() {
-  const [accession, setAccession] = useState<string>('')
+  const [accession, setAccession] = useState<string | null>(null)
   const [annotationId, setAnnotationId] = useState<string>('')
   const [assembly, setAssembly] = useState<AssemblyRecord | null>(null)
   const [annotations, setAnnotations] = useState<AnnotationRecord[]>([])
   const [selectedAnnotationId, setSelectedAnnotationId] = useState<string | undefined>()
   const [selectedChromosome, setSelectedChromosome] = useState<ChromosomeInterface | null>(null)
   const [isDetailsExpanded, setIsDetailsExpanded] = useState(true)
   const [isLoading, setIsLoading] = useState(true)
+  const [isInitialized, setIsInitialized] = useState(false)
 
   // Read URL parameters on client side
   useEffect(() => {
@@ -36,11 +37,12 @@ function JBrowseContent() {
       const accessionParam = urlParams.get('accession')
       const annotationIdParam = urlParams.get('annotationId')
 
-      if (accessionParam) setAccession(accessionParam)
+      setAccession(accessionParam)
       if (annotationIdParam) {
         setAnnotationId(annotationIdParam)
         setSelectedAnnotationId(annotationIdParam)
       }
+      setIsInitialized(true)
     }
   }, [])
 
@@ -67,18 +69,28 @@ function JBrowseContent() {
     fetchData()
   }, [accession])
 
+  // Show loading while initializing
+  if (!isInitialized) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  // Show error only after initialization and if no accession
   if (!accession) {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <h1 className="text-2xl font-bold text-red-600 mb-4">Invalid Accession</h1>
           <p className="text-gray-600 mb-4">No assembly accession provided in URL parameters.</p>
-          <a 
-            href="/" 
-            className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-          >
-            ← Back to Home
-          </a>
+          <Link href="/">
+            <Button variant="default" className="gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back to Home
+            </Button>
+          </Link>
         </div>
       </div>
     )

front/components/annotation-actions.tsx

@@ -13,6 +13,7 @@ import { Download, Eye, Activity, MoreVertical, FileText } from "lucide-react"
 import { StreamIntervalDialog } from "@/components/stream-interval-dialog"
 import { FileOverviewDialog } from "@/components/file-overview-dialog"
 import type { Annotation } from "@/lib/types"
+import { useRouter } from "next/navigation"
 
 interface AnnotationActionsProps {
   annotation: Annotation
@@ -23,9 +24,10 @@ export function AnnotationActions({ annotation, onJBrowseChange }: AnnotationAct
   const [streamDialogOpen, setStreamDialogOpen] = useState(false)
   const [overviewDialogOpen, setOverviewDialogOpen] = useState(false)
   const [downloadDialogOpen, setDownloadDialogOpen] = useState(false)
+  const router = useRouter()
 
   const handleDownload = () => {
-  // Create a temporary anchor element to trigger download
+    // Create a temporary anchor element to trigger download
     const link = document.createElement('a')
     link.href = `https://genome.crg.es/annotrieve/files/${annotation.indexed_file_info.bgzipped_path}`
     link.download = '' // optional: set a filename if needed
@@ -41,7 +43,8 @@ export function AnnotationActions({ annotation, onJBrowseChange }: AnnotationAct
   }
 
   const handleViewInBrowser = () => {
-    onJBrowseChange?.(annotation.assembly_accession, annotation.annotation_id)
+    // Use URL navigation instead of bubbling up params
+    router.push(`/jbrowse/?accession=${annotation.assembly_accession}&annotationId=${annotation.annotation_id}`)
   }
 
   return (

front/components/assembly-detail-view.tsx

@@ -5,6 +5,7 @@ import { AssemblyRecord } from "@/lib/api/types"
 import { ChromosomeViewer } from "./chromosome-viewer"
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
 
 interface AssemblyDetailViewProps {
   assemblyDetails: AssemblyRecord
@@ -13,25 +14,27 @@ interface AssemblyDetailViewProps {
 
 export function AssemblyDetailView({ assemblyDetails, onJBrowseChange }: AssemblyDetailViewProps) {
   const [showMoreStatistics, setShowMoreStatistics] = useState(false)
+  const router = useRouter()
 
   const handleDownload = () => {
-  // Create a temporary anchor element to trigger download
-  const link = document.createElement('a')
-  link.href = assemblyDetails.download_url as string
-  link.download = '' // optional: set a filename if needed
-  link.target = '_blank' // open in a new tab if preferred
-  link.rel = 'noopener noreferrer'
+    // Create a temporary anchor element to trigger download
+    const link = document.createElement('a')
+    link.href = assemblyDetails.download_url as string
+    link.download = '' // optional: set a filename if needed
+    link.target = '_blank' // open in a new tab if preferred
+    link.rel = 'noopener noreferrer'
 
-  // Append to body and simulate click
-  document.body.appendChild(link)
-  link.click()
+    // Append to body and simulate click
+    document.body.appendChild(link)
+    link.click()
 
-  // Clean up
-  document.body.removeChild(link)
+    // Clean up
+    document.body.removeChild(link)
   }
+  
   const handleViewInBrowser = () => {
-    onJBrowseChange?.(assemblyDetails.assembly_accession)
-    // In real implementation, this would open the genome browser
+    // Use URL navigation instead of bubbling up params
+    router.push(`/jbrowse/?accession=${assemblyDetails.assembly_accession}`)
   }
 
   const formatNumber = (num: string | number) => {