Skip to content

feat(visualization): add integrated research workspace - #36

Merged
dsk-dev-ai merged 1 commit into
mainfrom
feat/visualization-research-workspace
Aug 16, 2026
Merged

feat(visualization): add integrated research workspace#36
dsk-dev-ai merged 1 commit into
mainfrom
feat/visualization-research-workspace

Conversation

@dsk-dev-ai

@dsk-dev-ai dsk-dev-ai commented Aug 16, 2026

Copy link
Copy Markdown
Owner

Summary

Implements Phase 6.9 — Integrated Research Workspace.

This adds a unified research workspace that brings together the existing GenomeAI visualization capabilities into a single UI.

Features

  • Added /visualization/workspace
  • Added shared research context selection
  • Added preset genomic regions
  • Added custom genomic region input
  • Integrated Genome Browser
  • Integrated Gene / Transcript Viewer
  • Integrated Protein Viewer
  • Integrated Biological Network Viewer
  • Integrated scientific chart panels
  • Added responsive workspace layout
  • Added loading, empty, and error states
  • Added keyboard-accessible controls
  • Added aria-live announcements and validation alerts
  • Added injectable workspace data-source architecture
  • Reused existing visualization components and data-loader contracts
  • Preserved Phase 6.10 performance mechanisms

Data

  • Region-aware panels follow the selected genomic context.
  • Analysis and relationship panels currently use the existing fixture datasets.
  • The workspace data-source boundary allows existing Phase 5 API adapters to be connected later without changing the UI architecture.

Tests

Added workspace coverage for:

  • Context selection
  • Preset regions
  • Custom region parsing
  • Context synchronization
  • Genome Browser integration
  • Gene / Transcript integration
  • Loading states
  • Empty states
  • Error states
  • Retry behavior
  • Accessibility
  • Fixture data sources
  • Abort handling

Documentation

  • Added docs/visualization/workspace.md
  • Updated docs/visualization/README.md
  • Updated docs/visualization/roadmap.md

Constraints

  • No C++
  • No WebAssembly
  • No WebGPU
  • No Three.js
  • No Cytoscape.js
  • No D3.js
  • No second rendering architecture
  • No unnecessary runtime dependencies
  • No changes to Phase 5 search/backend functionality

Verification

  • Lint
  • Type checking
  • Tests
  • Turbo build
  • Workspace development route verification

Phase

Phase 6.9 — Integrated Research Workspace

Next

Phase 6.11 — Visualization Testing & Documentation

Summary by Sourcery

Implement an integrated research workspace that unifies existing GenomeAI visualization panels into a single route around a shared genomic context, backed by a fixture-based data-source seam and documented as Phase 6.9.

New Features:

  • Add /visualization/workspace route exposing an integrated research workspace composed of genome, gene/transcript, network, protein, and scientific chart panels.
  • Introduce a shared research context with presets and custom genomic region input that synchronizes region-aware panels.
  • Provide a pluggable WorkspaceDataSource interface and fixture-backed implementation to supply workspace data without backend changes.

Enhancements:

  • Link the main visualization landing page to the new research workspace for easier navigation.
  • Ensure workspace layout is responsive and panels use consistent loading, empty, and error handling via existing visualization containers.
  • Improve accessibility with labeled controls, aria-live region announcements, and keyboard-friendly workspace navigation.

Documentation:

  • Add dedicated Research Workspace documentation and update visualization README and roadmap to reflect Phase 6.9 implementation status and capabilities.

Tests:

  • Add focused unit and integration tests for research context modeling, data-source behavior, fixture-backed loaders, workspace rendering and synchronization, custom region handling, error/empty states, and accessibility of controls.

@sourcery-ai

sourcery-ai Bot commented Aug 16, 2026

Copy link
Copy Markdown

Reviewer's Guide

Implements the Phase 6.9 Integrated Research Workspace: a new /visualization/workspace route that composes existing GenomeAI visualization components around a shared genomic context using an injectable data-source seam, with fixture-backed loaders, accessibility-focused controls, and targeted tests and docs.

Sequence diagram for context change in research workspace

sequenceDiagram
  actor Researcher
  participant ResearchContextSelector
  participant ResearchWorkspace
  participant GenomeBrowserPanel
  participant GeneTranscriptPanel
  participant useVisualizationData
  participant WorkspaceDataSource

  Researcher->>ResearchContextSelector: change select value (brca1-locus)
  ResearchContextSelector->>ResearchWorkspace: onSelectContext(context)
  ResearchWorkspace->>ResearchWorkspace: setActiveContext(context)
  ResearchWorkspace->>ResearchWorkspace: contextRegionKey(activeContext.region)
  ResearchWorkspace-->>GenomeBrowserPanel: remount with region
  ResearchWorkspace-->>GeneTranscriptPanel: remount with region

  GeneTranscriptPanel->>useVisualizationData: loader(signal)
  useVisualizationData->>WorkspaceDataSource: loadGenes(region, signal)
  WorkspaceDataSource-->>useVisualizationData: genes
  useVisualizationData-->>GeneTranscriptPanel: status=success, data

  GenomeBrowserPanel->>WorkspaceDataSource: loadGenomeGenes(interval, signal)
  GenomeBrowserPanel->>WorkspaceDataSource: loadGenomeVariants(interval, signal)
  WorkspaceDataSource-->>GenomeBrowserPanel: gene features
  WorkspaceDataSource-->>GenomeBrowserPanel: variant features
Loading

File-Level Changes

Change Details Files
Add Integrated Research Workspace route and layout that assembles existing visualization panels around a shared research context.
  • Introduce /visualization/workspace Next.js page with metadata, heading, description, and embedded ResearchWorkspace component.
  • Update /visualization landing page to include an accessible navigation link to the new workspace route.
  • Compose a responsive panel grid in the workspace that lays out Genome Browser, Gene/Transcript, Network, Protein, and chart panels, with region-driven panels keyed by context region for remount on change.
apps/web/src/app/visualization/workspace/page.tsx
apps/web/src/app/visualization/page.tsx
apps/web/src/components/workspace/ResearchWorkspace.tsx
Introduce research context model and data-source seam so panels share genomic context while keeping data loading injectable and testable.
  • Define ResearchContext types, preset TP53/BRCA1 contexts, lookup helpers, region key generation, viewport conversion, and custom-context builder.
  • Define WorkspaceDataSource interface plus helper loader types and resolveFixture utility that matches existing visualization loader contracts and supports AbortSignal.
  • Provide a fixture-backed WorkspaceDataSource implementation that filters interval-based fixtures, wires whole-dataset fixtures, and is abort-aware.
apps/web/src/lib/workspace/researchContext.ts
apps/web/src/lib/workspace/dataSources.ts
apps/web/src/components/workspace/fixtureDataSources.ts
Wire existing Genome Browser and Gene/Transcript components into workspace panels that follow the shared genomic context and reuse the Phase 6 data lifecycle.
  • Create GenomeBrowserPanel that builds genome gene/variant tracks from the workspace data source and passes the shared initial viewport into the existing GenomeBrowser component.
  • Create GeneTranscriptPanel that uses useVisualizationData with a region-scoped loader from the workspace data source, wraps it in VisualizationContainer for loading/empty/error states, and renders GeneTranscriptViewer when successful.
  • Key both panels by a stable region key so they remount on context changes while preserving per-panel internal state semantics.
apps/web/src/components/workspace/GenomeBrowserPanel.tsx
apps/web/src/components/workspace/GeneTranscriptPanel.tsx
apps/web/src/lib/workspace/researchContext.ts
apps/web/src/components/workspace/ResearchWorkspace.tsx
Wire existing Network, Protein, and chart visualizations into thin workspace panels that use the shared data-source but remain whole-dataset and context-independent.
  • Add NetworkPanel and ProteinPanel that call existing useNetworkViewer/useProteinViewer hooks with workspace loaders and render the corresponding viewers with titles.
  • Add AnalysisChartPanels module that defines ExpressionPanel, HeatmapPanel, VolcanoPanel, CoveragePanel, and DistributionPanel using existing chart hooks/components and workspace loaders, treating them as TP53-pathway fixtures not driven by region.
  • Document in code comments that these panels do not change with context and are wired to be swappable to real endpoints later.
apps/web/src/components/workspace/NetworkPanel.tsx
apps/web/src/components/workspace/ProteinPanel.tsx
apps/web/src/components/workspace/AnalysisChartPanels.tsx
apps/web/src/components/workspace/ResearchWorkspace.tsx
Add accessible research context selector that supports presets and validated custom regions, with screen-reader-friendly feedback.
  • Implement ResearchContextSelector as a client component that renders a labeled select bound to shared presets and an aria-live output describing the active region and context.
  • Add custom region form using shared parseGenomeRegion and formatRegionLabel utilities, with Go action, aria-invalid wiring, role="alert" error messages, and a callback for validated intervals.
  • Ensure custom contexts appear in the select when active and expose test IDs for the active-context output and select.
apps/web/src/components/workspace/ResearchContextSelector.tsx
apps/web/src/components/workspace/ResearchWorkspace.tsx
Add focused unit and integration tests for workspace context behavior, data sources, fixtures, and accessibility hooks.
  • Test researchContext helpers for preset definitions, id lookup, region key stability, viewport conversion, and custom-context construction.
  • Test resolveFixture for happy path, abort behavior, and no internal caching; test fixtureWorkspaceDataSource for interval filtering, mapping to all fixtures, and abort handling.
  • Add React Testing Library-based tests for ResearchContextSelector (labels, aria-live, preset change, custom region parsing, error alert) and ResearchWorkspace (panel headings, context synchronization across panels, custom regions, empty gene state, error+retry).
apps/web/src/lib/workspace/researchContext.test.ts
apps/web/src/lib/workspace/dataSources.test.ts
apps/web/src/components/workspace/fixtureDataSources.test.ts
apps/web/src/components/workspace/ResearchContextSelector.test.tsx
apps/web/src/components/workspace/ResearchWorkspace.test.tsx
Update visualization documentation and roadmap to describe Phase 6.9 Integrated Research Workspace and link new docs.
  • Mark Phase 6.9 as current and implemented in roadmap and README, and adjust milestone ordering to move 6.9 into the completed section.
  • Add detailed workspace documentation covering scope, route/layout, architecture, data flow, API usage, fixture boundary, loading/empty/error states, accessibility, tests, and limitations.
  • Link the new Research Workspace doc from the visualization README and describe Phase 6.9 capabilities in the status section.
docs/visualization/roadmap.md
docs/visualization/README.md
docs/visualization/workspace.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@qodo-code-review

Copy link
Copy Markdown

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

@coderabbitai

coderabbitai Bot commented Aug 16, 2026

Copy link
Copy Markdown

Important

Review available on request

  • 🔍 Trigger review

Reviews should be triggered manually for repositories with fewer than 10 stars. Select Trigger review above or comment @coderabbitai review to review the latest changes. For a full review, comment @coderabbitai full review.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: aec447c2-97ec-4d70-9040-17d599ff2aaf


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue, and left some high level feedback:

  • In fixtureDataSources, abortAware partially duplicates the abort handling already encapsulated by resolveFixture; consider unifying on a single helper (e.g. a generic abortAware that can wrap both interval and whole-dataset loaders) to avoid subtle differences in cancellation behavior.
  • In ResearchContextSelector, the select has both a visible <label> and an aria-label of "Research context"; you can drop the aria-label and rely on the label’s htmlFor association to reduce redundant ARIA and keep the accessible name source consistent.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In `fixtureDataSources`, `abortAware` partially duplicates the abort handling already encapsulated by `resolveFixture`; consider unifying on a single helper (e.g. a generic `abortAware` that can wrap both interval and whole-dataset loaders) to avoid subtle differences in cancellation behavior.
- In `ResearchContextSelector`, the `select` has both a visible `<label>` and an `aria-label` of "Research context"; you can drop the `aria-label` and rely on the `label`’s `htmlFor` association to reduce redundant ARIA and keep the accessible name source consistent.

## Individual Comments

### Comment 1
<location path="apps/web/src/components/workspace/ResearchContextSelector.tsx" line_range="61-65" />
<code_context>
+        <label htmlFor="research-context" className="text-sm font-medium text-gray-700">
+          Research context
+        </label>
+        <select
+          id="research-context"
+          aria-label="Research context"
+          data-testid="research-context-select"
+          className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
</code_context>
<issue_to_address>
**suggestion:** Consider relying on the explicit `<label>` instead of duplicating it with `aria-label` on the `<select>`.

Because the `<select>` is already labeled via `htmlFor`/`id`, the extra `aria-label` is redundant and may cause some screen readers to announce the label twice. Please remove the `aria-label` and rely on the associated `<label>` for the accessible name.

```suggestion
        <select
          id="research-context"
          data-testid="research-context-select"
          className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
```
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread apps/web/src/components/workspace/ResearchContextSelector.tsx
@dsk-dev-ai
dsk-dev-ai merged commit 2827232 into main Aug 16, 2026
5 checks passed
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