Initial Release help-frontend

Dr. Frontend

Visualization Gallery

35 visualization components across charts, 3D viewers, dashboards, and data tables.

WebGL Scatterplot

PerturbSeq

High-performance scatter plot rendering thousands of points via WebGL. Supports pan, zoom, lasso selection, and tooltip overlays.

WebGLCanvasReact

WebGL Heatmap

PerturbSeq

Dense matrix heatmap rendered via WebGL for gene expression data. Supports row/column clustering and color scale controls.

WebGLCanvasReact

Waterfall Plot

PerturbSeq

D3-based waterfall chart for ranked differential expression. Supports threshold lines, tooltips, and responsive sizing.

D3SVGReact

Histogram / Scatter / TAP Plot

GYDE

Multi-chart plotting suite from GYDE. Includes histogram, scatter, and TAP (Titer-Affinity-Polyspecificity) plots for antibody characterization.

ReactMUICanvas

Sequence Frequency Analysis

GYDE

Amino acid frequency analysis with position-specific scoring. Visualizes conservation and variability across aligned sequences.

ReactMUICanvas

Linked Visualizations

Showcase

Cross-framework linked views: a Svelte choropleth map drives a Vue scatter plot via shared nanostores. Demonstrates multi-framework coordination.

SvelteVueD3Nanostores

3D Protein Structure Viewer

GYDE

Molstar-based 3D molecular viewer for protein structures. Supports PDB upload, chain highlighting, and surface rendering.

MolstarWebGLReact

Plotly Chart Renderer

BioNav

Generic Plotly.js wrapper that renders any chart type from JSON data — line, bar, pie, scatter, histogram, heatmap, and box plots.

ReactPlotly.js

Workflow Canvas

BioNav

Agentic workflow UI with plan/execute/result panels. Renders multi-step AI agent workflows with status tracking and result visualization.

ReactPlotly.js

Jupyter Notebook Renderer

BioNav

Renders Jupyter notebook cells with syntax-highlighted code blocks and formatted output. Used for displaying computational results inline.

ReactMarkdown

Artifacts Viewer

Agenecy

Renders AI-generated artifacts in sandboxed iframes — HTML, SVG, Mermaid diagrams, and Vega/Vega-Lite charts with pan-zoom controls.

SvelteVegaMermaidiframe

Agent Workflow Graph

Agenecy

Interactive node-based workflow editor using XY Flow (Svelte). Visualizes multi-step AI agent execution plans with status tracking.

SvelteXY Flow

Streamgraph

Vantage

D3 stacked area chart showing portfolio value over time by therapeutic area. Supports PTS-adjusted view and interactive legend.

VueD3Vuetify

Molecule Sankey Diagram

Vantage

Sankey flow diagram showing molecule progression through development phases, colored by therapeutic area or molecule type.

VueD3Vuetify

Risk-Reward Scatterplot

Vantage

Interactive D3 scatter plot with R-tree collision detection for label placement. Plots portfolio assets by risk vs. reward with draggable labels.

VueD3R-tree

Phase Diagram

Vantage

SVG pipeline diagram showing drug development phases (LI through Approval) with PTS-colored gates and event dates.

VueSVGD3

Portfolio Timeline

Vantage

Multi-track timeline showing project events, decision points, and PVC values over time with interactive filtering and side-drawer details.

VueD3Vuetify

Volcano Plot

OPSViewer

Plotly-based volcano plot for differential expression analysis. Supports marker click, hover tooltips, lasso selection, and shift-key multi-select.

ReactPlotly.jsNext.js

Cluster Plot

OPSViewer

Plotly scatter plot for UMAP/t-SNE cluster visualization with phase-based filtering and interactive marker selection.

ReactPlotly.jsNext.js

Image Montage Viewer

OPSViewer

Pan-zoom montage of microscopy images with per-channel brightness/contrast/hue controls, Zarr streaming, and cell-level tooltips.

ReactPanzoomZarrNext.js

ECDF Plot

OPSViewer

Empirical cumulative distribution function plot with overlay comparisons for gene expression distributions across conditions.

ReactPlotly.jsNext.js

Molecule Card Browser

LitLMol

Filterable card grid for browsing molecules with SVG structure diagrams, mini histograms for property distributions, and threshold sliders.

ReactSVGTanStack Router

MultiomeExplorer

VIDA

Multi-omics data explorer with WebGL scatter plots, split-grid layouts, and integration with ArtifactDB/scran.js for in-browser single-cell analysis.

Reactepiviz.glD3scran.js

Kana (scRNA-seq in Browser)

VIDA

Client-side single-cell RNA-seq analysis pipeline running entirely in the browser via WebAssembly. Includes QC, clustering, and marker detection.

ReactWebAssemblyscran.js

WebGL Single-Cell Scatter

VIDA

High-performance WebGL scatter plot for single-cell data using epiviz.gl. Renders millions of points with GPU-accelerated pan/zoom.

epiviz.glWebGL

Epiviz Genomic Charts

VIDA

Web component library for genomic data visualization — tracks, heatmaps, scatter plots, and stacked line plots with drag-and-drop composition.

Web ComponentsD3

Ophthal Image Visualizer

Showcase

Medical retinal image viewer with layer annotations, measurement tools, and side-by-side comparison for ophthalmology data.

ReactCanvas

Well Plate Viewer

Showcase

Interactive 96/384/1536-well plate grid with color-coded status, selection, and detail panels. Standard lab assay visualization.

ReactCSS Grid

Multiple Sequence Alignment

GYDE

WebGL-accelerated MSA viewer with sequence logos, conservation heatmaps, and residue-level annotations for protein engineering.

ReactWebGLMUI

Research Dashboard

Showcase

Drug discovery researcher dashboard with task queue, KPI cards, status indicators, and activity timeline.

ReactRecharts

Data Operations Dashboard

Showcase

Real-time data ingestion monitoring with throughput metrics, modality breakdown, anomaly detection, and historical charts.

ReactRecharts

BioNav Data Table

BioNav

Full-featured data table with sorting, filtering, column management, and row selection. TanStack Table integration.

ReactTanStack Table

Sequence Table

FoxHog

Bioinformatics sequence table with amino acid coloring, alignment indicators, and property columns.

ReactTanStack Table

Evidence Table

Showcase

CRUD evidence table with inline editing, row actions, external links, and validation. Supports add/delete operations.

ReactTanStack Table

Target Qualification Table

Showcase

Scored target assessment table with multi-criteria ratings, trend indicators, and weighted scoring.

ReactTanStack Table