Skip to content

Commit

Permalink
feat: enhance sanplot (#1090)
Browse files Browse the repository at this point in the history 
* feat(sanPlot): use LineSeries instead of BarSeries and show the noiseLevel

* feat: improve cosmetic of san plot close #1067 #1068
  • Loading branch information
@jobo322
jobo322 committed May 17, 2021
1 parent c019fef commit adf371b
Show file tree
Hide file tree
Showing 2 changed files with 252 additions and 65 deletions.
135 changes: 112 additions & 23 deletions src/component/panels/SpectrumsPanel/base/setting/Spectrum1DHistogram.jsx
View file
@@ -1,23 +1,23 @@
import {
xHistogram,
xAbsolute,
xMinMaxValues,
xNoiseSanPlot,
} from 'ml-spectra-processing';
import { xNoiseSanPlot } from 'ml-spectra-processing';
import { memo, useMemo } from 'react';
import { Axis, BarSeries, Heading, Plot } from 'react-plot';
import { Axis, LineSeries, Legend, Heading, Plot } from 'react-plot';

const Spectrum1DHistogram = memo(({ color = 'red', data }) => {
const histogramData = useMemo(() => {
const input = prepareData(data.re);
const { sanplot } = xNoiseSanPlot(input);
const { x, y } = sanplot.positive;
const Spectrum1DHistogram = memo(({ color = 'red', data, options = {} }) => {
const input = prepareData(data.re);
const { factorStd = 5, yLogBase = 2 } = options;
const sanResult = xNoiseSanPlot(input, options);

let sanPlot = {};
let lines = {};
for (let plotKey in sanResult.sanplot) {
const { x, y } = sanResult.sanplot[plotKey];
let result = new Array(x.length);
for (let i = 0; i < x.length; i++) {
result[i] = { x: x[i], y: y[i] };
}
return result;
}, [data.re]);
sanPlot[plotKey] = result;
lines[plotKey] = getLine(sanResult[plotKey], result, { yLogBase });
}

return (
<div
Expand All @@ -29,30 +29,109 @@ const Spectrum1DHistogram = memo(({ color = 'red', data }) => {
>
<Plot
width={220}
height={200}
margin={{ bottom: 50, left: 10, top: 30, right: 10 }}
height={220}
margin={{ bottom: 40, left: 40, top: 50, right: 13 }}
// seriesViewportStyle={{ stroke: 'gray' }}
>
<Heading title="Sanplot" />
<LineSeries
data={sanPlot.positive}
xAxis="x"
yAxis="y"
label="positive"
lineStyle={{
stroke: color,
strokeWidth: 1.2,
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>
<LineSeries
data={lines.positive}
xAxis="x"
yAxis="y"
label="noise level"
lineStyle={{
stroke: 'blue',
strokeWidth: 0.8,
strokeDasharray: [3, 3],
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>
<Axis
id="x"
label="Pt"
position="bottom"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.6rem' }}
/>
<Axis
id="y"
label={`Intensity [Log${yLogBase}]`}
position="left"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.7rem' }}
/>
<Legend position="embedded" bottom={5} right={60} />
</Plot>

<Plot
width={220}
height={180}
margin={{ bottom: 50, left: 40, top: 10, right: 13 }}
// seriesViewportStyle={{ stroke: 'gray' }}
>
<Heading title="Histogram" />
<BarSeries
data={histogramData}
<LineSeries
data={sanPlot.negative}
xAxis="x"
yAxis="y"
label="negative"
lineStyle={{
stroke: color,
strokeWidth: 1.2,
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>

<LineSeries
data={lines.negative}
xAxis="x"
yAxis="y"
label="noise level"
lineStyle={{
stroke: 'blue',
strokeWidth: 0.8,
strokeDasharray: [3, 3],
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>

<Axis
id="x"
label="Pt"
position="bottom"
displayGridLines
tickStyle={{ fontSize: '0.7rem' }}
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.5rem' }}
/>
<Axis
id="y"
label={`Intensity [Log${yLogBase}]`}
position="left"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.7rem' }}
/>
<Axis id="y" position="left" displayGridLines hidden />
<Legend position="embedded" bottom={5} right={60} />
</Plot>
</div>
);
Expand All @@ -62,11 +141,21 @@ export default Spectrum1DHistogram;

function prepareData(input) {
let length = input.length;
let jump = Math.floor(length / 24576) || 1;
let jump = Math.floor(length / 307200) || 1;
const array = new Float64Array((length / jump) >> 0);
let index = 0;
for (let i = 0; i < array.length; i += jump) {
array[index++] = input[i];
}
return array;
}

function getLine(value, data, options) {
const { log10, abs } = Math;
const { yLogBase } = options;
const inLogScale = log10(abs(value)) / log10(yLogBase);
return [
{ x: data[0].x, y: inLogScale },
{ x: data[data.length - 1].x, y: inLogScale },
];
}
182 changes: 140 additions & 42 deletions src/component/panels/SpectrumsPanel/base/setting/Spectrum2DHistogram.jsx
View file
@@ -1,54 +1,141 @@
import { xNoiseSanPlot } from 'ml-spectra-processing';
import { memo, useMemo } from 'react';
import { Axis, BarSeries, Heading, Plot } from 'react-plot';
import { Axis, LineSeries, Legend, Heading, Plot } from 'react-plot';

const Spectrum2DHistogram = memo(({ color = 'red', data }) => {
const histogramData = useMemo(() => {
let matrix = prepareData(data.z);
const { sanplot } = xNoiseSanPlot(matrix);
const { x, y } = sanplot.positive;
const Spectrum2DHistogram = memo(({ color = 'red', data, options = {} }) => {
let input = prepareData(data.z);
const { factorStd = 5, yLogBase = 2 } = options;
const sanResult = xNoiseSanPlot(input, options);

let sanPlot = {};
let lines = {};
for (let plotKey in sanResult.sanplot) {
const { x, y } = sanResult.sanplot[plotKey];
let result = new Array(x.length);
for (let i = 0; i < x.length; i++) {
result[i] = { x: x[i], y: y[i] };
}
return result;
}, [data.z]);
sanPlot[plotKey] = result;
lines[plotKey] = getLine(sanResult[plotKey], result, { yLogBase });
}

return (
<div
style={{
borderTop: '1px solid #ededed',
marginTop: '10px',
paddingTop: '10px',
}}
>
<Plot
width={450}
height={200}
margin={{ bottom: 50, left: 10, top: 30, right: 10 }}
// seriesViewportStyle={{ stroke: 'gray' }}
<div>
<span style={{ padding: '0 200px' }}>San Plot</span>
<div
style={{
borderTop: '1px solid #ededed',
marginTop: '10px',
paddingTop: '10px',
display: 'flex',
flexDirection: 'row',
}}
>
<Heading title="Histogram" />
<BarSeries
data={histogramData}
xAxis="x"
yAxis="y"
lineStyle={{
stroke: color,
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>
<Axis
id="x"
position="bottom"
displayGridLines
tickStyle={{ fontSize: '0.7rem' }}
/>
<Axis id="y" position="left" displayGridLines hidden />
</Plot>
<Plot
width={220}
height={180}
margin={{ bottom: 50, left: 40, top: 10, right: 13 }}
// seriesViewportStyle={{ stroke: 'gray' }}
>
<LineSeries
data={sanPlot.positive}
xAxis="x"
yAxis="y"
label="positive"
lineStyle={{
stroke: color,
strokeWidth: 1.2,
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>
<LineSeries
data={lines.positive}
xAxis="x"
yAxis="y"
label="noise level"
lineStyle={{
stroke: 'blue',
strokeWidth: 0.8,
strokeDasharray: [3, 3],
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>
<Axis
id="x"
label="Pt"
position="bottom"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.6rem' }}
/>
<Axis
id="y"
label={`Intensity [Log${yLogBase}]`}
position="left"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.7rem' }}
/>
<Legend position="embedded" bottom={90} right={5} />
</Plot>

<Plot
width={220}
height={180}
margin={{ bottom: 50, left: 40, top: 10, right: 13 }}
// seriesViewportStyle={{ stroke: 'gray' }}
>
<LineSeries
data={sanPlot.negative}
xAxis="x"
yAxis="y"
label="negative"
lineStyle={{
stroke: color,
strokeWidth: 1.2,
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>

<LineSeries
data={lines.negative}
xAxis="x"
yAxis="y"
label="noise level"
lineStyle={{
stroke: 'blue',
strokeWidth: 0.8,
strokeDasharray: [3, 3],
}}
markerStyle={{
fill: color,
stroke: color,
}}
/>

<Axis
id="x"
label="Pt"
position="bottom"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.5rem' }}
/>
<Axis
id="y"
position="left"
tickStyle={{ fontSize: '0.6rem' }}
labelStyle={{ fontSize: '0.7rem' }}
/>
<Legend position="embedded" bottom={90} right={5} />
</Plot>
</div>
</div>
);
});
Expand All @@ -58,11 +145,22 @@ export default Spectrum2DHistogram;
function prepareData(matrix) {
let cols = matrix[0].length;
let rows = matrix.length;
let jump = Math.floor((cols * rows) / 51200) || 1;
let jump = Math.floor((cols * rows) / 204800) || 1;
const array = new Float64Array(((cols * rows) / jump) >> 0);
console.log(array.length);
let index = 0;
for (let i = 0; i < array.length; i += jump) {
array[index++] = matrix[(i / rows) >> 0][i % rows];
}
return array;
}

function getLine(value, data, options) {
const { log10, abs } = Math;
const { yLogBase } = options;
const inLogScale = log10(abs(value)) / log10(yLogBase);
return [
{ x: data[0].x, y: inLogScale },
{ x: data[data.length - 1].x, y: inLogScale },
];
}

0 comments on commit adf371b

Please sign in to comment.