|
| 1 | +# Add MS Data Visualization |
| 2 | + |
| 3 | +Add mass spectrometry data visualizations using pyopenms-viz or OpenMS-Insight components. |
| 4 | + |
| 5 | +MS data has specialized visualization needs: mass spectra (m/z vs intensity stick plots), chromatograms (RT vs intensity), 2D peak maps (RT vs m/z heatmaps), isotope patterns, fragment ion annotations, and statistical plots like volcano plots for differential expression. |
| 6 | + |
| 7 | +## Instructions |
| 8 | + |
| 9 | +1. **Ask the user** for: |
| 10 | + - What data to visualize (spectra, chromatograms, peak maps, tables, heatmaps) |
| 11 | + - Data size expectations (small/medium vs. large datasets with millions of points) |
| 12 | + - Whether interactive cross-component linking is needed |
| 13 | + |
| 14 | +2. **Choose the right library**: |
| 15 | + |
| 16 | +| Use Case | Library | Why | |
| 17 | +|----------|---------|-----| |
| 18 | +| Quick spectrum/chromatogram/peak map plots | **pyopenms-viz** | Simple one-liner API, publication quality | |
| 19 | +| Large datasets (millions of points) | **OpenMS-Insight** | Server-side pagination, intelligent downsampling | |
| 20 | +| Interactive tables with pagination | **OpenMS-Insight** `Table` | Tabulator.js, CSV export, server-side filtering | |
| 21 | +| Cross-linked views (click table row → highlight in plot) | **OpenMS-Insight** | Shared `link_id` across components | |
| 22 | +| Standard Plotly plots (bar, scatter, etc.) | **plotly.express** directly | Already available, use with `show_fig()` | |
| 23 | + |
| 24 | +3. **Implement the visualization** in a page or workflow results section. |
| 25 | + |
| 26 | +## pyopenms-viz Patterns |
| 27 | + |
| 28 | +pyopenms-viz extends pandas DataFrames with MS-specific plot accessors. Always use the `plotly` backend for Streamlit. |
| 29 | + |
| 30 | +```python |
| 31 | +import pyopenms_viz |
| 32 | +from src.common.common import show_fig |
| 33 | + |
| 34 | +# Mass spectrum (stick plot from mz/intensity columns) |
| 35 | +fig = df.plot.ms_spectrum(backend="plotly", title="MS1 Spectrum") |
| 36 | +show_fig(fig, "spectrum-plot") |
| 37 | + |
| 38 | +# 2D peak map (RT vs m/z, colored by intensity) |
| 39 | +fig = df.plot.peak_map(backend="plotly") |
| 40 | +show_fig(fig, "peak-map") |
| 41 | + |
| 42 | +# Chromatogram (RT vs intensity) |
| 43 | +fig = df.plot.chromatogram(backend="plotly") |
| 44 | +show_fig(fig, "chromatogram") |
| 45 | + |
| 46 | +# Mobilogram (ion mobility vs intensity) |
| 47 | +fig = df.plot.mobilogram(backend="plotly") |
| 48 | +show_fig(fig, "mobilogram") |
| 49 | +``` |
| 50 | + |
| 51 | +**Key points:** |
| 52 | +- DataFrame must have appropriate columns (e.g., `mz`, `intensity` for spectra) |
| 53 | +- Always use `backend="plotly"` in Streamlit context |
| 54 | +- Use `show_fig()` from `src/common/common.py` for consistent display with download buttons |
| 55 | +- Import `pyopenms_viz` to register the plot accessors (even if not used directly) |
| 56 | + |
| 57 | +## OpenMS-Insight Patterns |
| 58 | + |
| 59 | +OpenMS-Insight provides Vue.js-backed interactive components optimized for large MS datasets. |
| 60 | + |
| 61 | +```python |
| 62 | +from openms_insight import Table, LinePlot, Heatmap, VolcanoPlot, SequenceView |
| 63 | + |
| 64 | +# Interactive table with server-side pagination |
| 65 | +Table(df, key="results-table", page_size=50) |
| 66 | + |
| 67 | +# Stick-style mass spectrum |
| 68 | +LinePlot(df, x="mz", y="intensity", key="spectrum-plot") |
| 69 | + |
| 70 | +# 2D heatmap for large datasets (auto-downsampling) |
| 71 | +Heatmap(df, x="rt", y="mz", z="intensity", key="peak-heatmap") |
| 72 | + |
| 73 | +# Volcano plot for differential expression |
| 74 | +VolcanoPlot(df, x="log2fc", y="neg_log10_pval", key="volcano") |
| 75 | + |
| 76 | +# Peptide sequence with fragment ion annotations |
| 77 | +SequenceView(sequence="PEPTIDER", ions=ion_df, key="sequence") |
| 78 | +``` |
| 79 | + |
| 80 | +### Cross-Component Linking |
| 81 | + |
| 82 | +Link components so selections in one update another: |
| 83 | + |
| 84 | +```python |
| 85 | +# Selecting a row in the table highlights the corresponding point in the plot |
| 86 | +Table(df, key="linked-table", link_id="feature_id") |
| 87 | +LinePlot(df, x="mz", y="intensity", key="linked-plot", link_id="feature_id") |
| 88 | +Heatmap(df, x="rt", y="mz", z="intensity", key="linked-heatmap", link_id="feature_id") |
| 89 | +``` |
| 90 | + |
| 91 | +All components sharing the same `link_id` column are automatically synchronized. |
| 92 | + |
| 93 | +## Integration in Workflow Results |
| 94 | + |
| 95 | +Add visualization to a workflow's `results()` method: |
| 96 | + |
| 97 | +```python |
| 98 | +@st.fragment |
| 99 | +def results(self) -> None: |
| 100 | + result_file = Path(self.workflow_dir, "results", "step-name", "output.tsv") |
| 101 | + if result_file.exists(): |
| 102 | + df = pd.read_csv(result_file, sep="\t") |
| 103 | + |
| 104 | + # pyopenms-viz for spectrum plots |
| 105 | + import pyopenms_viz |
| 106 | + fig = df.plot.ms_spectrum(backend="plotly") |
| 107 | + show_fig(fig, "results-spectrum") |
| 108 | + |
| 109 | + # Or OpenMS-Insight for interactive exploration |
| 110 | + from openms_insight import Table |
| 111 | + Table(df, key="results-table") |
| 112 | + else: |
| 113 | + st.warning("No results found. Please run the workflow first.") |
| 114 | +``` |
| 115 | + |
| 116 | +## Reference Files |
| 117 | + |
| 118 | +- Display utilities: `src/common/common.py` — `show_fig()`, `show_table()` |
| 119 | +- Dependencies: `requirements.txt` — `pyopenms-viz`, `openms-insight` |
| 120 | +- Example workflow results: `src/Workflow.py` — `results()` method |
| 121 | + |
| 122 | +## Library Repositories |
| 123 | + |
| 124 | +- **pyopenms-viz**: OpenMS/pyopenms-viz — pandas DataFrame `.plot()` extension with matplotlib/bokeh/plotly backends |
| 125 | +- **OpenMS-Insight**: t0mdavid-m/openms-insight — Vue.js interactive Streamlit components with caching and downsampling |
| 126 | + |
| 127 | +## Checklist |
| 128 | + |
| 129 | +- [ ] Correct library chosen for the use case |
| 130 | +- [ ] Dependencies present in `requirements.txt` |
| 131 | +- [ ] `show_fig()` used for pyopenms-viz plots (consistent download/export behavior) |
| 132 | +- [ ] `backend="plotly"` specified for all pyopenms-viz plots |
| 133 | +- [ ] Unique `key=` values for all OpenMS-Insight components |
| 134 | +- [ ] Cross-component linking set up if multiple views of same data |
0 commit comments