Skip to content

Add visual domain mapping for single-feature Domains tab#1222

Merged
olsonanl merged 1 commit intoBV-BRC:alphafrom
olsonanl:features/visual-domains
Mar 6, 2026
Merged

Add visual domain mapping for single-feature Domains tab#1222
olsonanl merged 1 commit intoBV-BRC:alphafrom
olsonanl:features/visual-domains

Conversation

@olsonanl
Copy link
Contributor

@olsonanl olsonanl commented Mar 6, 2026

Summary

  • Implements an interactive D3-based visualization that displays protein domains as colored rectangles positioned along a protein sequence bar
  • The visualization appears above the grid when viewing domains for a single feature/protein (not shown for multi-protein domain lists)
  • Includes track-based layout for overlapping domains, colorblind-accessible color coding by source database, tooltips, and external database links

Fixes https://github.com/BV-BRC/issues/issues/1502

Features

  • Horizontal protein backbone with domain rectangles positioned by start/end coordinates
  • Track-based layout algorithm to handle overlapping domains
  • Color-coded domains by source database (CDD, InterPro, Pfam, TIGRFAM, SMART, etc.)
  • Tooltips showing domain details (source, position, e-value)
  • Click to open external database links (CDD, InterPro, Pfam, etc.)
  • Bidirectional selection/hover sync between visualization and grid
  • Collapsible panel with scrollable content

New Files

  • D3DomainViewer.js - Core D3 visualization widget
  • DomainColorScheme.js - Color palette and external URL mappings
  • DomainVisualizationPanel.js - Collapsible container panel
  • domain-viewer.css - Styling for visualization components

Test plan

  • Navigate to a Feature page with domains (e.g., /view/Feature/PATRIC.xxx#view_tab=proteinFeatures)
  • Verify the Domain Map visualization appears above the grid
  • Check domain rectangles are positioned correctly on the protein backbone
  • Verify color coding matches source databases in legend
  • Hover over domains to see tooltips with details
  • Click a domain to open external database link
  • Select rows in grid and verify visualization highlights corresponding domains
  • Collapse/expand the panel using the toggle button
  • Scroll the panel when many domains are present
  • Navigate to a multi-protein domain list and verify visualization does NOT appear

🤖 Generated with Claude Code

Implement an interactive D3-based visualization that displays protein
domains as colored rectangles positioned along a protein sequence bar.
The visualization appears above the grid when viewing domains for a
single feature/protein.

Features:
- Horizontal protein backbone with domain rectangles positioned by
  start/end coordinates
- Track-based layout algorithm to handle overlapping domains
- Color-coded domains by source database (CDD, InterPro, Pfam, etc.)
  using colorblind-accessible palette
- Tooltips showing domain details (source, position, e-value)
- Click to open external database links
- Bidirectional selection sync between visualization and grid
- Collapsible panel with scrollable content
- Only shown for single-feature view, not multi-protein domain lists

New files:
- D3DomainViewer.js: Core D3 visualization widget
- DomainColorScheme.js: Color palette and external URL mappings
- DomainVisualizationPanel.js: Collapsible container panel
- domain-viewer.css: Styling for visualization components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@olsonanl olsonanl merged commit 229ae59 into BV-BRC:alpha Mar 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant