Refine UI layouts, simplify links, and merge analysis with search page #15
Conversation
…nd Simulations in the biomodel detail page
There was a problem hiding this comment.
Pull Request Overview
This PR refines the UI by combining biomodel analysis with the search page, simplifies link generation by removing AI analysis links, and improves the overall layout with collapsible sections and tabbed navigation.
Key changes:
- Removes AI analysis links from ChatBox and simplifies to database-only links
- Adds tabbed interface to biomodel detail page separating overview and AI analysis
- Integrates ChatBox component directly into the search page for inline AI analysis
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| frontend/components/ChatBox.tsx | Simplifies link generation by removing AI analysis links and keeping only database links |
| frontend/app/search/[bmid]/page.tsx | Major UI overhaul adding tabs, collapsible sections, and embedded ChatBox for AI analysis |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| } | ||
| }, [diagramAnalysis]); | ||
|
|
||
| if (error) return <div className="p-8 text-center text-red-600">{error}</div>; |
There was a problem hiding this comment.
The loading check was removed but the component can still be in a loading state. This will cause the component to render with null data while loading, potentially causing runtime errors when accessing data properties.
| if (error) return <div className="p-8 text-center text-red-600">{error}</div>; | |
| if (error) return <div className="p-8 text-center text-red-600">{error}</div>; | |
| if (loading) return <div className="p-8 text-center text-gray-500">Loading...</div>; |
| <img | ||
| src={biomodelDiagramUrl || "/placeholder.svg"} | ||
| alt="Biomodel Diagram" | ||
| className="max-w-full h-[350px] mx-auto border border-slate-200 rounded shadow" |
There was a problem hiding this comment.
Fixed height of 350px for the biomodel diagram may cause distortion or cropping for images with different aspect ratios. Consider using max-height instead or maintaining aspect ratio.
| className="max-w-full h-[350px] mx-auto border border-slate-200 rounded shadow" | |
| className="max-w-full max-h-[350px] w-auto object-contain mx-auto border border-slate-200 rounded shadow" |
| <span | ||
| className={ | ||
| data.privacy === 1 ? "text-red-600" : "text-green-1200" | ||
| data.privacy === 1 ? "text-red-600" : "text-green-600" |
There was a problem hiding this comment.
Changed from 'text-green-1200' to 'text-green-600'. While this fixes what appears to be a typo, 'text-green-1200' is not a valid Tailwind CSS class.
Summary:
This PR mainly addresses the issues #10 , #11 , #12
Chat response: replaced two hyperlinks with a single link to the model page
Search page:
Biomodel detail page: implemented collapsible sections for Description, Applications, and Simulations
Merged Analysis page into Search page using tabs
AI Analysis tab now includes only the diagram analysis