feat(visualization): add gene and transcript visualization - #29
Merged
Conversation
Reviewer's GuideAdds a reusable Gene / Transcript visualization layer on top of the existing Genome Browser, including a typed domain model, pure geometry utilities, a coordinate-search-based data adapter, a React SVG viewer component, demo wiring, dev exon fixtures, and accompanying docs/tests, all reusing the shared genomic coordinate system without backend changes. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthroughThe pull request adds a typed gene/transcript model, coordinate-search adapter, viewport geometry, strand-aware SVG rendering, transcript selection, fixtures, tests, and visualization-page integration. ChangesGene Transcript Visualization
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant VisualizationPage
participant GeneTranscriptDemo
participant useVisualizationData
participant GeneTranscriptViewer
VisualizationPage->>GeneTranscriptDemo: render gene/transcript demo
GeneTranscriptDemo->>useVisualizationData: load TP53 fixture data
useVisualizationData-->>GeneTranscriptDemo: return loading, error, or gene data
GeneTranscriptDemo->>GeneTranscriptViewer: render loaded gene and chr17 viewport
GeneTranscriptViewer-->>GeneTranscriptDemo: report transcript selection
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- In
geneTranscript.tsyou re-declareRawSearchIteminstead of reusing the exportedRawSearchItemfromlib/genome/api.ts; consider importing it to avoid type drift if the raw search shape changes. - The
ExonSourceinfetchGeneTranscriptsalways overwritestranscript.exons, which could discard real API-provided exons in the future; you may want to only enrich whenexonsis empty or explicitly merge the two sources.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `geneTranscript.ts` you re-declare `RawSearchItem` instead of reusing the exported `RawSearchItem` from `lib/genome/api.ts`; consider importing it to avoid type drift if the raw search shape changes.
- The `ExonSource` in `fetchGeneTranscripts` always overwrites `transcript.exons`, which could discard real API-provided exons in the future; you may want to only enrich when `exons` is empty or explicitly merge the two sources.
## Individual Comments
### Comment 1
<location path="apps/web/src/lib/genome/geneTranscript.ts" line_range="75" />
<code_context>
pagination?: PaginationPayload
}
-type RawSearchItem = Record<string, unknown>
+/** A raw, untyped item from a search response. */
+export type RawSearchItem = Record<string, unknown>
</code_context>
<issue_to_address>
**suggestion:** Reuse the shared RawSearchItem type from the genome API instead of redefining it here.
This module now defines and exports its own `RawSearchItem`, separate from the one in `lib/genome/api.ts`. Please import and reuse the shared type instead to avoid duplication and keep the contracts in sync as the raw search item shape changes.
</issue_to_address>
### Comment 2
<location path="apps/web/src/lib/genome/geneTranscript.ts" line_range="226-227" />
<code_context>
+ const owned: GeneTranscript[] = []
+ for (const transcript of transcripts) {
+ if (!isValidTranscript(transcript)) continue
+ const explicit = transcript.geneId !== undefined && transcript.geneId === gene.id
+ const contained =
+ transcript.chromosome === gene.chromosome &&
+ transcript.start >= gene.start &&
</code_context>
<issue_to_address>
**issue:** Explicit transcript→gene linking may fail when `gene.id` differs from `gene.geneId`.
In `groupTranscriptsByGene`, explicit linking uses `transcript.geneId === gene.id`, but `toGene` sets `id` to `idOf(item.id) || gene_id`. When `item.id` is a search-record id and `gene_id` is an accession, `transcript.geneId` will match `gene.geneId`, not `gene.id`, so valid transcript–gene pairs may be treated as unlinked and dropped. To make explicit linking robust, compare against `gene.geneId ?? gene.id` or check both fields.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/app/visualization/GeneTranscriptDemo.tsx`:
- Line 25: Align the viewport in GeneTranscriptDemo by changing the chromosome
17 start coordinate from 7_660_000 to 7_650_000, matching GenomeBrowserDemo
while preserving the existing end coordinate and memoization.
In `@apps/web/src/components/genome/GeneTranscriptViewer.test.tsx`:
- Around line 124-145: Update the reverseGene fixture in the
GeneTranscriptViewer test to set its start and end bounds to the BRCA1 interval,
instead of inheriting TP53_FIXTURE values. Keep the existing transcript and
viewport values unchanged so GeneGlyph renders and the test exercises the
intended reverse-strand gene.
In `@apps/web/src/components/genome/GeneTranscriptViewer.tsx`:
- Around line 106-111: Replace the role="img" assignment on the interactive SVG
in GeneTranscriptViewer with a non-leaf role such as group, preserving the
accessible geneAriaLabel name so the transcript controls remain exposed to
screen readers.
- Around line 242-252: Keep strand markers within each clipped span by capping
the arrowhead length used in the GeneGlyph rendering at span.width, and ensure
the body width does not exceed the remaining span after that arrowhead. Also
update the width-based rendering path at
apps/web/src/components/genome/GeneTranscriptViewer.tsx lines 269-275 to cap the
arrowhead base offset at width.
In `@apps/web/src/lib/genome/geneTranscript.fixtures.ts`:
- Around line 108-110: Update the negative-strand exon fixture entries so
transcription order is represented correctly: change exon-3’s rank to 1 and
exon-1’s rank to 3, while leaving exon-2 and the genomic coordinates unchanged.
In `@apps/web/src/lib/genome/geneTranscript.ts`:
- Around line 226-232: Update the transcript ownership condition in the
gene-matching logic so coordinate containment is considered only when
transcript.geneId is undefined; when an explicit geneId is present, assign the
transcript only if it matches gene.id or gene.geneId. Add a regression test
covering a contained transcript whose geneId references a different gene.
In `@docs/visualization/gene-transcript.md`:
- Around line 40-49: Add language identifiers to the fenced code blocks in the
GeneTranscriptViewer documentation: mark the architecture diagram block as text
and the validation-command block as shell, including the additional block near
the validation commands.
- Around line 80-85: Update the JSON request example in the gene-transcript
documentation to use valid integer literals for interval.start and interval.end:
replace the underscore-separated values with 7650000 and 7700000, leaving the
remaining fields unchanged.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5525443a-48af-42e1-8108-f556deb4a5a9
📒 Files selected for processing (15)
apps/web/src/app/visualization/GeneTranscriptDemo.tsxapps/web/src/app/visualization/page.tsxapps/web/src/components/genome/GeneTranscriptViewer.test.tsxapps/web/src/components/genome/GeneTranscriptViewer.tsxapps/web/src/lib/genome/api.tsapps/web/src/lib/genome/geneTranscript.fixtures.tsapps/web/src/lib/genome/geneTranscript.test.tsapps/web/src/lib/genome/geneTranscript.tsapps/web/src/lib/genome/geneTranscriptApi.test.tsapps/web/src/lib/genome/geneTranscriptApi.tsapps/web/src/lib/genome/geneTranscriptGeometry.test.tsapps/web/src/lib/genome/geneTranscriptGeometry.tsdocs/visualization/README.mddocs/visualization/gene-transcript.mddocs/visualization/roadmap.md
…ouping, strand bounds)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements Phase 6.3 — Gene / Transcript Visualization for GenomeAI.
This builds on the Phase 6.1 Visualization Foundation and Phase 6.2
Genome Browser, adding a reusable biological annotation layer for
visualizing genes, transcripts, and exon structures using the existing
genomic coordinate system.
Features
Gene Visualization
Transcript Visualization
Exon Visualization
Genome Browser Integration
Accessibility
Testing
Added coverage for:
Architecture
The visualization follows the existing architecture:
Genome Browser
↓
Shared genomic coordinate system
↓
Gene / Transcript visualization layer
↓
Gene + Transcript + Exon tracks
The implementation uses React + TypeScript and existing browser/SVG
rendering primitives.
No C++, WebGPU, WebAssembly, Three.js, D3, or Cytoscape dependencies
were introduced.
API
The implementation uses the existing GenomeAI API/data contracts where
available.
No new backend infrastructure was introduced unless required by an
existing supported contract.
Documentation
Updated:
docs/visualization/README.mddocs/visualization/roadmap.mdAdded Gene / Transcript visualization documentation covering:
Verification
make setupmake lintmake typecheckmake testpnpm turbo buildRoadmap
Completed:
Next:
Future visualization milestones remain unchanged.
Scope
This PR intentionally does not implement:
Summary by Sourcery
Add a Phase 6.3 gene/transcript visualization layer to the GenomeAI web app, integrating a new SVG viewer and demo with the existing genome browser and coordinate system.
New Features:
Enhancements:
Documentation:
Tests:
Summary by CodeRabbit