Advanced zoom example with advanced mass spectra ...

[lpatiny]

An advanced mass spectrum example has been implemented: https://zakodium.github.io/react-plot/?path=/story/experimental-spectra-mass--advanced-mass-example

It contains 3 properties in the data (https://github.com/zakodium/react-plot/blob/6ec53a22b75f2b371b26a21d08326fd78cc31a63/stories/data/HCys100OH_0.01.json):

• profile
• centroid
• bestPeaks

We would like to reimplemented this example but make it dynamic:

• we can enter a molecular formula (mf) (default: HCys10OH)
• we can zoom in and labels are recalculated on the fly
• we can zoom full out with double click

Something similar to:

This will use as developper dependency mass-tools and ml-spectra-processing

ml-spectra-processing is used to convert {x:[], y:[]} to [{x,y},{x,y},...] by https://github.com/mljs/spectra-processing/blob/master/src/xy/xyToXYObject.ts

I try here after to add some pseudocode knowing that the 'input' variable is 'mf' that by default has the value 'HCys10OH' but could be an input in the storybook

import { IsotopicDistribution, getBestPeaks, MF } from 'mass-tools';
import {xyToXYObject} from 'ml-spectra-processing';

const mf = "HCys10OH";

// we calculate the 'profile' and 'centroid', this should be done only if `mf` is changing
const isotopicDistribution = new IsotopicDistribution(mf, {
  ensureCase: true,
});

const profileXY = isotopicDistribution.getGaussian({
  maxValue: 100,
});
const profile = xyToXYObject(profileXY);

const centroid = isotopicDistribution.getTable({
  maxValue: 100,
});

// calculating the bestPeaks should be done each time the zoom (from, to) is changing and should create the new annotations
let bestPeaks = getBestPeaks(centroid, {
  from: undefined,
  to: undefined,
  limit: 5,
  numberSlots: 10,
  threshold: 0.01,
});

console.log({ profile, centroid, bestPeaks });

[lpatiny]

@wadjih-bencheikh18 Could you try to implement this new dynamic chart in the story book ?

[wadjih-bencheikh18]

@lpatiny Could you explain "we can zoom in and labels are recalculated on the fly" please

[lpatiny]

If you look at the little movie it is not always to same labels (bestPeaks) that are displayed over the peaks. When you zoom in/out the bestPeaks should be recalculated using the code example and the the Annotations should be created based on the bestPeaks.