Prepare code to allow STOCSY in multispectra

[lpatiny]

Calculate the median / Q1 / Q3 / min / max

Be able to display median, Q1/Q3 and min/max

Color the median by STOCSY

All those options should be available in the preferences of multi spectra analysis

[hamed-musallam]

@lpatiny

you need to calculate the median of what (relative, absolute, min, or max)?

the user has now one option is to enter a formula, Is what you looking for is to has two options
1- select from predefined functions
2- add a formula

is this what you mean?

[lpatiny]

Sorry this was some notes during the meeting and the explanation was pretty short.

This issue is actually quite complex to implement and will require a lot of calculations / options.

We first need to generate for the spectra a matrix and for this we need to implement those 2 features:

• Change content of Matrix Generation panel #1892
• Add filter to all the spectra based on the matrix generation preferences #1893

Once this is done all the 'x' array of all the spectra should be the same (same from / to and same length).

You can then call the method matrixBoxPlot from ml-spectra-processing (mljs/spectra-processing#169)

We can then based on the preferences draw 2 areas and a median chart.

There will be 3 ways to color the median:

1. a fixed color
2. based on the Standard deviation
3. As a STOCSY

For the second method you can get inspired by this code:

https://github.com/cheminfo/spectra-processor/blob/55b53ce69f6cc78984880bf76d7e7beb72ac4c22/src/jsgraph/getBoxPlotChart.js#L1-L111

[lpatiny]

This should be developed behind the experimental flag.

4 buttons:

• Hide all spectra (active if at least one is visible)
• Show all spectra (active if at least one is not visible)
• Show BoxPlot (toggle button)
• Show STOCSY (toggle button)

We need to calculate derived data from the matrix.

function boxPlot(matrix) {
  return {
    min: [],
    max: [],
    median: [],
    q1: [],
    q3: [],
    color: []
  }
}

We need a path in light grey (see image above) that goes through all the min and the max.
We need another path in drag grey that goes through all q1 and q3.
Finally a line in the middle (color, need to make many segments) using the median.

And for the STOCSY:

function boxPlot(matrix) {
  {
    y: [],
    color: [], // as a string like "#ABCDEF"
  }
}