Skip to content

feat(visualization): add advanced scientific charts - #34

Merged
dsk-dev-ai merged 2 commits into
mainfrom
feat/visualization-scientific-charts-advanced
Aug 16, 2026
Merged

feat(visualization): add advanced scientific charts#34
dsk-dev-ai merged 2 commits into
mainfrom
feat/visualization-scientific-charts-advanced

Conversation

@dsk-dev-ai

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

Copy link
Copy Markdown
Owner

Summary

Implements the next milestone of the GenomeAI Visualization Platform by extending the scientific chart foundation with reusable advanced scientific visualizations.

This builds on the existing Genome Browser, Biological Network Viewer, and Expression Chart without introducing a separate visualization architecture.

Features

Expression Heatmap

  • Reusable matrix-based heatmap
  • Row and column labels
  • Value scaling
  • Missing-value handling
  • Tooltips
  • Responsive rendering
  • Deterministic ordering

Volcano Plot

  • Effect-size axis
  • Statistical-significance axis
  • Point rendering
  • Tooltips
  • Optional threshold lines
  • Point highlighting
  • Deterministic rendering

Coverage Chart

  • Genomic interval visualization
  • Coverage values
  • Genomic coordinate axis
  • Tooltips
  • Responsive rendering
  • Reuses existing GenomeAI coordinate utilities

Statistical Distribution Chart

  • Grouped scientific values
  • Deterministic grouping
  • Tooltips
  • Axis labels
  • Responsive rendering

Architecture

  • Extends the existing scientific visualization foundation
  • Strongly typed TypeScript data models
  • Data transformation separated from rendering
  • Reusable chart components
  • Existing genomic coordinate infrastructure reused
  • Existing visualization components preserved
  • No duplicate charting architecture

Scope

This implementation does not introduce:

  • C++
  • WebAssembly
  • WebGPU
  • Three.js for 2D scientific charts
  • unnecessary visualization dependencies
  • fabricated production biological data

Deterministic fixture data is used only where real GenomeAI APIs are not yet available.

Testing

Added coverage for:

  • Heatmap data validation
  • Matrix consistency
  • Missing values
  • Value normalization
  • Volcano plot data handling
  • Threshold behavior
  • Coverage interval validation
  • Coordinate ordering
  • Distribution grouping
  • Empty datasets
  • Deterministic ordering
  • Tooltip mapping
  • Loading states
  • Empty states
  • Error states
  • Rendering behavior
  • Accessibility

Integration

The existing visualization experience remains intact:

  • Genome Browser
  • Biological Network Viewer
  • Expression Chart
  • Advanced Scientific Charts

All visualization features coexist through the same visualization architecture.

Documentation

Added documentation covering:

  • Advanced scientific chart architecture
  • Data models
  • Transformation pipeline
  • Rendering pipeline
  • API integration
  • Fixture-data policy
  • Accessibility
  • Testing
  • Extension points

Updated the visualization README and roadmap.

Verification

  • make setup
  • make lint
  • make typecheck
  • make test
  • pnpm turbo build
  • git diff --check
  • Manual /visualization verification
  • Genome Browser regression check
  • Biological Network Viewer regression check
  • Expression Chart regression check
  • Advanced charts manually verified
  • No browser console errors

Roadmap

Completed:

  • Phase 6.1 — Visualization Foundation
  • Phase 6.2 — Genome Browser
  • Phase 6.3 — Gene/Transcript Visualization
  • Phase 6.4 — Variant Visualization
  • Phase 6.5 — Protein Viewer
  • Phase 6.6 — Biological Network Viewer
  • Phase 6.7 — Scientific Charts / Expression Visualization
  • Advanced Scientific Visualizations

Next:

Continue the remaining Phase 6 visualization milestones according to the GenomeAI roadmap.

Summary by Sourcery

Implement Phase 6.8 advanced scientific charts on top of the existing visualization foundation and integrate them into the GenomeAI web app and documentation.

New Features:

  • Add reusable advanced scientific chart components for expression heatmaps, volcano plots, genomic coverage charts, and statistical distribution charts, powered by new TypeScript data models and pure scientific transformation modules.
  • Introduce a shared useChartData hook and advanced API adapters for future backend endpoints for heatmap, volcano, coverage, and distribution datasets, with fixture-backed demos under /visualization.
  • Extend ChartAxes with continuous x-axis support and integrate an AdvancedScientificDemo section into the visualization page alongside existing Phase 6 visualizations.

Enhancements:

  • Refactor the expression chart hook to reuse the shared chart data lifecycle and align it with the new advanced chart infrastructure.
  • Reuse Genome Browser coordinate and viewport utilities in the coverage chart to avoid duplicating genomic interval logic.
  • Improve hook tests for the network and protein viewers by wrapping state-changing calls in act and tightening asynchronous expectations.

Documentation:

  • Update visualization README and roadmap to document Phase 6.8 advanced scientific charts and add a dedicated Advanced Scientific Charts architecture document.
  • Document the Genome Browser demo as fixture-backed until the Phase 5 coordinate-search backend is reachable.

Tests:

  • Add comprehensive unit and integration tests for advanced scientific chart modules, hooks, and components, including validation, normalization, domains, tooltips, lifecycle states, selection, and accessibility.
  • Add tests for the new shared useChartData hook and genome browser fixtures to ensure deterministic behavior and compatibility with existing visualization infrastructure.

Add Phase 6.8 advanced scientific visualizations built on the Phase 6.7
architecture: expression heatmap, volcano plot, coverage chart, and
statistical distribution chart. Each chart is a presentation-only
component fed by a typed view-model hook (useChartData/useHeatmap/
useVolcanoPlot/useCoverageChart/useDistributionChart), with pure data
normalizers and no new runtime dependencies.

- Reusable ChartAxes gained continuous x-scale support for volcano plots
- useExpressionChart refactored onto the shared useChartData lifecycle
- Coverage chart reuses Phase 6.2 genome viewport/geometry utilities
- HeatmapHoverTooltip cellKey prop rename fixes a reserved-React-prop bug
- Fixture-backed demos wired into /visualization (Phase 6.1-6.8)
- Hardened flaky network/protein hook tests by flushing pending effects
  and wrapping model mutations in act, making the suite deterministic
- Docs: advanced-scientific-charts.md plus README/roadmap updates

Validation: biome/ruff clean, tsc/pyright clean, 673 vitest + 1606
pytest passing, turbo build green, manual dev-server check at
/visualization.
The Genome Browser demo was the only visualization demo calling the live
Phase 5 coordinate-search API, so the Genes and Variants tracks showed
'Failed to fetch' whenever the backend was unreachable. Wire both tracks
to typed development fixtures for the shared TP53 neighbourhood instead,
matching the fixture-backed approach used by every other demo.

- genomeBrowser.fixtures.ts: TP53-region genes and variants filtered by
  interval, flowing through the same useGenomeTrack lifecycle
- GenomeBrowserDemo: track loaders resolve fixture data for the current
  window (no real fetch, so the page renders without a running backend)
- Six new unit tests for interval filtering and window bounds

Validation: tsc clean, biome clean, 679 vitest passing (6 new), dev
server renders /visualization without track errors.
@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

@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.

Sorry @dsk-dev-ai, your pull request is larger than the review limit of 150000 diff characters

@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: f2439cdd-18e6-4f7d-bc64-8b8071b1d5b1


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 commented Aug 16, 2026

Copy link
Copy Markdown

Reviewer's Guide

Implements Phase 6.8 Advanced Scientific Charts on top of the existing visualization foundation, adding four reusable scientific chart types (heatmap, volcano, coverage, distribution), a shared chart data lifecycle hook, strongly typed data models and pure transformation modules, plus fixtures, demos, documentation, roadmap updates, accessibility and test refinements, while keeping existing viewers and APIs intact.

File-Level Changes

Change Details Files
Extend the scientific chart axes component to support both categorical and continuous x-axes for advanced charts.
  • ChartAxes props updated to accept optional categorical xScale and continuous xContinuousScale plus optional xTicks array.
  • Rendering logic split to handle categorical sample labels vs numeric tick labels on the x-axis.
  • Added conditional computation of categoryLabelTicks only when xScale is provided and used xContinuousScale.toPixel for numeric ticks.
apps/web/src/components/scientific/ChartAxes.tsx
Introduce strongly typed advanced scientific data models, pure transformation/statistics modules, shared chart data lifecycle hook, and API/fixture adapters for heatmap, volcano, coverage, and distribution charts.
  • Added HeatmapDataset, VolcanoDataset/VolcanoPoint, CoverageDataset/CoverageBin, DistributionDataset/DistributionValue types in advancedTypes.ts.
  • Implemented pure modules for heatmap validation/normalization/color scale/tooltips, volcano validation/normalization/domains/thresholds/tooltips, coverage validation/normalization/domains/extent/tooltips, and distribution validation/normalization/grouping/statistics/tooltips.
  • Added statistics.ts providing sortedSample, R-7 quantiles, summarize, and boxPlotWhiskers for group summaries.
  • Created advancedApi.ts to normalize raw records and document future /advanced/* endpoints plus fetch*Dataset helpers that currently surface API limitations via GenomeApiError.
  • Added advanced.fixtures.ts with deterministic dev datasets for TP53 heatmap, differential-expression volcano, TP53 coverage, and expression distribution routed through the same normalizers.
  • Implemented useChartData shared hook wrapping useVisualizationData with custom/default loader selection, dataset-id reload, and empty-state detection.
apps/web/src/lib/scientific/advancedTypes.ts
apps/web/src/lib/scientific/heatmap.ts
apps/web/src/lib/scientific/volcano.ts
apps/web/src/lib/scientific/coverage.ts
apps/web/src/lib/scientific/distribution.ts
apps/web/src/lib/scientific/statistics.ts
apps/web/src/lib/scientific/advancedApi.ts
apps/web/src/lib/scientific/advanced.fixtures.ts
apps/web/src/lib/scientific/useChartData.ts
Add view-model hooks and interactive SVG components for the new advanced charts, integrated into the visualization page via a dedicated demo section.
  • Implemented useHeatmap, useVolcanoPlot, useCoverageChart, and useDistributionChart hooks that compose useChartData with chart-specific domains, statistics, thresholds, selection, and genome viewport navigation.
  • Added Heatmap, VolcanoPlot, CoverageChart, and DistributionChart components with responsive sizing, axes integration, tooltips, keyboard-accessible selection, focus rings, and detail panels.
  • Created AdvancedScientificDemo that wires the advanced hooks to dev fixtures via custom loaders and presents all four charts in the /visualization UI.
  • Updated visualization page metadata and description to mention Phase 6.8 Advanced Scientific Charts and rendered AdvancedScientificDemo alongside existing demos.
apps/web/src/lib/scientific/useHeatmap.ts
apps/web/src/lib/scientific/useVolcanoPlot.ts
apps/web/src/lib/scientific/useCoverageChart.ts
apps/web/src/lib/scientific/useDistributionChart.ts
apps/web/src/components/scientific/Heatmap.tsx
apps/web/src/components/scientific/VolcanoPlot.tsx
apps/web/src/components/scientific/CoverageChart.tsx
apps/web/src/components/scientific/DistributionChart.tsx
apps/web/src/app/visualization/AdvancedScientificDemo.tsx
apps/web/src/app/visualization/page.tsx
Switch GenomeBrowser demo to use new typed genomeBrowser fixtures instead of live Phase 5 APIs, keeping demo behavior while isolating dev data.
  • Added genomeBrowser.fixtures.ts with TP53-region gene and variant fixtures plus interval filter helpers.
  • Updated GenomeBrowserDemo to use fixtureIntervalGenes and fixtureIntervalVariants via Promise-resolved loaders, documenting fixture-backed behavior until backend is reachable.
apps/web/src/lib/genome/genomeBrowser.fixtures.ts
apps/web/src/app/visualization/GenomeBrowserDemo.tsx
Refactor expression chart to reuse the shared chart data lifecycle and tighten test ergonomics for existing Network and Protein viewer hooks.
  • Replaced useVisualizationData usage in useExpressionChart with useChartData, wiring loader, datasetId, defaultLoader, and noLoaderMessage; removed manual datasetId-based refetch effect.
  • Updated useNetworkViewer and useProteinViewer tests to use React Testing Library act() around imperative model mutations (filtering, zoom/pan, selection, refetch) and added small waits where needed to avoid state-update warnings.
apps/web/src/lib/scientific/useExpressionChart.ts
apps/web/src/lib/network/useNetworkViewer.test.tsx
apps/web/src/lib/protein/useProteinViewer.test.tsx
Add documentation and roadmap updates describing Phase 6.8 Advanced Scientific Charts, their architecture, and future milestones.
  • Updated visualization roadmap current milestone to 6.8 Advanced Scientific Charts, added Delivered and Constraints sections, and shifted subsequent milestone numbering and notes to include 6.8 in the Integrated Research Workspace.
  • Extended visualization README with a Phase 6.8 section describing advanced chart capabilities, data models, transformation pipeline, reuse of chart/genome infrastructure, API adapter contracts, fixture boundary, and referenced new Advanced Scientific Charts doc.
  • Added advanced-scientific-charts.md documenting architecture, chart types, data models, pipelines, API integration, fixture policy, accessibility, performance, testing, and file list; linked it from README documents table.
docs/visualization/roadmap.md
docs/visualization/README.md
docs/visualization/advanced-scientific-charts.md
Add comprehensive unit and component tests for advanced scientific modules, hooks, fixtures, and chart components to cover data validation, normalization, tooltips, lifecycles, and accessibility.
  • Added vitest suites for heatmap.ts, volcano.ts, coverage.ts, distribution.ts, statistics.ts, advancedApi.ts, and genomeBrowser.fixtures.ts validating structural rules, normalization, domains, tooltips, and fixture integrity.
  • Added hook tests for useChartData, useHeatmap, useVolcanoPlot, useCoverageChart, and useDistributionChart covering loading/empty/error states, refetch, dataset-id reload, derived domains/groups/statistics, and selection/viewport behavior.
  • Added component tests for Heatmap, VolcanoPlot, CoverageChart, and DistributionChart ensuring headings, states, axis labels, tooltips, keyboard selection, aria-pressed, focus rings, detail panels, controls wiring, and responsive width handling.
apps/web/src/lib/scientific/heatmap.test.ts
apps/web/src/lib/scientific/volcano.test.ts
apps/web/src/lib/scientific/coverage.test.ts
apps/web/src/lib/scientific/distribution.test.ts
apps/web/src/lib/scientific/statistics.test.ts
apps/web/src/lib/scientific/advancedApi.test.ts
apps/web/src/lib/genome/genomeBrowser.fixtures.test.ts
apps/web/src/lib/scientific/useChartData.test.tsx
apps/web/src/lib/scientific/useHeatmap.test.tsx
apps/web/src/lib/scientific/useVolcanoPlot.test.tsx
apps/web/src/lib/scientific/useCoverageChart.test.tsx
apps/web/src/lib/scientific/useDistributionChart.test.tsx
apps/web/src/components/scientific/Heatmap.test.tsx
apps/web/src/components/scientific/VolcanoPlot.test.tsx
apps/web/src/components/scientific/CoverageChart.test.tsx
apps/web/src/components/scientific/DistributionChart.test.tsx

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

@dsk-dev-ai
dsk-dev-ai merged commit dec8603 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