From 833100e9263766f16d473aab36466fe2d57fd45a Mon Sep 17 00:00:00 2001
From: Luc Patiny <luc@patiny.com>
Date: Wed, 2 Nov 2022 19:24:26 +0100
Subject: [PATCH 1/6] fix: plot mass with labels

---
 src/app/components/MeasurementMassPlot.tsx | 83 +++++++++++++---------
 1 file changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/app/components/MeasurementMassPlot.tsx b/src/app/components/MeasurementMassPlot.tsx
index be10cfaf..a69cb49f 100644
--- a/src/app/components/MeasurementMassPlot.tsx
+++ b/src/app/components/MeasurementMassPlot.tsx
@@ -1,5 +1,5 @@
 import { xyToXYObject } from 'ml-spectra-processing';
-import { getBestPeaks, getPeaks } from 'ms-spectrum';
+import { getBestPeaks, Spectrum } from 'ms-spectrum';
 import { useMemo } from 'react';
 import {
   Annotation,
@@ -21,6 +21,25 @@ interface Peak {
 }
 
 export function MeasurementMassPlot(props: MeasurementPlotProps) {
+  const { measurement } = props;
+  if (!measurement.data) {
+    throw new Error(
+      'This is weird, the data property is not available on measurement',
+    );
+  }
+  if (measurement.data.length === 0) {
+    throw new Error('Data property is empty');
+  }
+  if (measurement.data.length > 1) {
+    throw new Error('Length of data property is larger than 1');
+  }
+  if (!measurement.data[0].variables.x) {
+    throw new Error('x variable in undefined');
+  }
+  if (!measurement.data[0].variables.y) {
+    throw new Error('y variable in undefined');
+  }
+
   return (
     <PlotController>
       <MassComponent {...props} />
@@ -29,48 +48,41 @@ export function MeasurementMassPlot(props: MeasurementPlotProps) {
 }
 
 function MassComponent(props: MeasurementPlotProps) {
-  const {
-    measurement,
-    dataIndex = 0,
-    xVariableName = 'x',
-    yVariableName = 'y',
-  } = props;
+  const { measurement } = props;
+
   const { data } = measurement;
-  const xAxis = `${xVariableName}-x`;
-  const yAxis = `${yVariableName}-y`;
-  const { x, y } = useMemo(() => {
-    const { variables } = data[dataIndex];
-    const { [xVariableName]: x, [yVariableName]: y } = variables;
-    if (x === undefined || y === undefined) {
-      throw new Error(
-        `Variable "${
-          x === undefined ? xVariableName : yVariableName
-        }" is not available in data. Only ${Object.keys(
-          data[dataIndex].variables,
-        ).join(', ')} are available`,
-      );
-    }
+  const { variables } = data[0];
 
-    return { x, y };
-  }, [data, dataIndex, xVariableName, yVariableName]);
+  const xAxis = `x-x`; // why such a weird name ???
+  const yAxis = `y-y`;
+  const { x, y } = useMemo(() => {
+    return { x: variables.x, y: variables.y };
+  }, [variables]);
 
   const { x: xDomain } = usePlotControllerAxes();
   const { profile, peaks } = useMemo(() => {
-    const profile = xyToXYObject({
+    const spectrum = new Spectrum({
       x: x.data,
       y: y.data,
     });
+    const isContinuous = spectrum.isContinuous();
+    const profile =
+      isContinuous &&
+      xyToXYObject({
+        x: x.data,
+        y: y.data,
+      });
     return {
       profile,
-      peaks: getPeaks(profile),
+      peaks: spectrum.getPeaks(profile),
     };
   }, [x.data, y.data]);
   const bestPeaks = useMemo(
     () =>
       getBestPeaks(peaks, {
-        from: xDomain?.min ?? Number.NEGATIVE_INFINITY,
-        to: xDomain?.max ?? Number.POSITIVE_INFINITY,
-        limit: 5,
+        from: xDomain?.min,
+        to: xDomain?.max,
+        limit: 10,
         numberSlots: 10,
         threshold: 0.01,
       }),
@@ -78,13 +90,14 @@ function MassComponent(props: MeasurementPlotProps) {
   );
   return (
     <BasicComponent {...props}>
-      <LineSeries
-        data={profile}
-        lineStyle={{ stroke: 'green' }}
-        xAxis={xAxis}
-        yAxis={yAxis}
-      />
-
+      {profile && (
+        <LineSeries
+          data={profile}
+          lineStyle={{ stroke: 'green' }}
+          xAxis={xAxis}
+          yAxis={yAxis}
+        />
+      )}
       <BarSeries
         data={peaks}
         xAxis={xAxis}

From 4e7e7b376e815e93262bfd24b20828a353bbe821 Mon Sep 17 00:00:00 2001
From: Luc Patiny <luc@patiny.com>
Date: Thu, 3 Nov 2022 15:05:33 +0100
Subject: [PATCH 2/6] chore: fix mass label position

---
 src/app/components/MeasurementMassPlot.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/app/components/MeasurementMassPlot.tsx b/src/app/components/MeasurementMassPlot.tsx
index a69cb49f..011e6f2d 100644
--- a/src/app/components/MeasurementMassPlot.tsx
+++ b/src/app/components/MeasurementMassPlot.tsx
@@ -106,13 +106,7 @@ function MassComponent(props: MeasurementPlotProps) {
       />
       <Annotations>
         {bestPeaks.map(({ x, y, shortLabel }: Peak) => (
-          <Annotation.Group
-            key={x}
-            x={x}
-            y={y}
-            horizontalAlign="none"
-            verticalAlign="none"
-          >
+          <Annotation.Group key={x} x={x} y={y} xAxis={xAxis} yAxis={yAxis}>
             <Annotation.Line
               x1="0"
               x2="0"

From 95a7891b846d2c36656a255d094a3b330b247891 Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Fri, 4 Nov 2022 11:25:18 +0100
Subject: [PATCH 3/6] refactor: remove useless axisIDs

---
 src/app/components/MeasurementMassPlot.tsx | 12 +++++-------
 src/app/components/MeasurementPlot.tsx     |  6 ++----
 src/app/components/utils.tsx               | 22 ++++++++++------------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/app/components/MeasurementMassPlot.tsx b/src/app/components/MeasurementMassPlot.tsx
index 011e6f2d..14b58136 100644
--- a/src/app/components/MeasurementMassPlot.tsx
+++ b/src/app/components/MeasurementMassPlot.tsx
@@ -53,8 +53,6 @@ function MassComponent(props: MeasurementPlotProps) {
   const { data } = measurement;
   const { variables } = data[0];
 
-  const xAxis = `x-x`; // why such a weird name ???
-  const yAxis = `y-y`;
   const { x, y } = useMemo(() => {
     return { x: variables.x, y: variables.y };
   }, [variables]);
@@ -94,19 +92,19 @@ function MassComponent(props: MeasurementPlotProps) {
         <LineSeries
           data={profile}
           lineStyle={{ stroke: 'green' }}
-          xAxis={xAxis}
-          yAxis={yAxis}
+          xAxis="x"
+          yAxis="y"
         />
       )}
       <BarSeries
         data={peaks}
-        xAxis={xAxis}
-        yAxis={yAxis}
+        xAxis="x"
+        yAxis="y"
         lineStyle={{ stroke: 'red' }}
       />
       <Annotations>
         {bestPeaks.map(({ x, y, shortLabel }: Peak) => (
-          <Annotation.Group key={x} x={x} y={y} xAxis={xAxis} yAxis={yAxis}>
+          <Annotation.Group key={x} x={x} y={y} xAxis="x" yAxis="y">
             <Annotation.Line
               x1="0"
               x2="0"
diff --git a/src/app/components/MeasurementPlot.tsx b/src/app/components/MeasurementPlot.tsx
index 32b0bed9..2a9989e8 100644
--- a/src/app/components/MeasurementPlot.tsx
+++ b/src/app/components/MeasurementPlot.tsx
@@ -41,8 +41,6 @@ function MeasurementComponent(props: MeasurementPlotProps) {
     yVariableName = 'y',
   } = props;
 
-  const xAxis = `${xVariableName}-x`;
-  const yAxis = `${yVariableName}-y`;
   const { x, y } = useMemo(() => {
     const { variables } = data[dataIndex];
     const { [xVariableName]: x, [yVariableName]: y } = variables;
@@ -66,8 +64,8 @@ function MeasurementComponent(props: MeasurementPlotProps) {
           x: x.data,
           y: y.data,
         })}
-        xAxis={xAxis}
-        yAxis={yAxis}
+        xAxis="x"
+        yAxis="y"
       />
     </BasicComponent>
   );
diff --git a/src/app/components/utils.tsx b/src/app/components/utils.tsx
index 670ed6c6..db2709e2 100644
--- a/src/app/components/utils.tsx
+++ b/src/app/components/utils.tsx
@@ -40,8 +40,6 @@ export function BasicComponent(
   } = props;
   const { title = '', data } = measurement;
 
-  const xAxis = `${xVariableName}-x`;
-  const yAxis = `${yVariableName}-y`;
   const { x, y } = useMemo(() => {
     const { variables } = data[dataIndex];
     const { [xVariableName]: x, [yVariableName]: y } = variables;
@@ -59,27 +57,27 @@ export function BasicComponent(
   }, [data, dataIndex, xVariableName, yVariableName]);
   const direction = new Set(['vertical', 'horizontal']);
   const rectZoom = useRectangularZoom({
-    horizontalAxisId: xAxis,
-    verticalAxisId: yAxis,
+    horizontalAxisId: 'x',
+    verticalAxisId: 'y',
     disabled: zoom !== 'rectangular',
   });
   const axisZoom = useAxisZoom({
     direction: zoom === 'vertical' ? 'vertical' : 'horizontal',
-    horizontalAxisId: xAxis,
-    verticalAxisId: yAxis,
+    horizontalAxisId: 'x',
+    verticalAxisId: 'y',
     disabled: !direction.has(zoom),
   });
   useAxisWheelZoom({
     direction: wheelZoom === 'vertical' ? 'vertical' : 'horizontal',
-    axisId: wheelZoom === 'vertical' ? yAxis : xAxis,
+    axisId: wheelZoom === 'vertical' ? 'y' : 'x',
     disabled: !direction.has(wheelZoom),
   });
   const crossHairAnnot = useCrossHair({
-    horizontalAxisId: xAxis,
-    verticalAxisId: yAxis,
+    horizontalAxisId: 'x',
+    verticalAxisId: 'y',
     disabled: !crossHair,
   });
-  usePan({ horizontalAxisId: xAxis, verticalAxisId: yAxis });
+  usePan({ horizontalAxisId: 'x', verticalAxisId: 'y' });
 
   return (
     <div
@@ -104,7 +102,7 @@ export function BasicComponent(
               {crossHairAnnot.annotations}
             </Annotations>
             <Axis
-              id={xAxis}
+              id="x"
               hidden={!showHorizontalAxis}
               displayPrimaryGridLines={showVerticalGrid}
               flip={flipHorizontalAxis}
@@ -112,7 +110,7 @@ export function BasicComponent(
               label={`${x.label}${x.units ? `(${x.units})` : ''}`}
             />
             <Axis
-              id={yAxis}
+              id="y"
               hidden={!showVerticalAxis}
               displayPrimaryGridLines={showHorizontalGrid}
               position="left"

From 18faee3810c8a8c2d8794b00a2186296cd621a05 Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Fri, 4 Nov 2022 11:32:25 +0100
Subject: [PATCH 4/6] test: update axis ids

---
 tests/components/MeasurementPlot.test.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/tests/components/MeasurementPlot.test.tsx b/tests/components/MeasurementPlot.test.tsx
index 097f22a6..15950426 100644
--- a/tests/components/MeasurementPlot.test.tsx
+++ b/tests/components/MeasurementPlot.test.tsx
@@ -44,13 +44,13 @@ test.describe('MeasurementPlot', () => {
     await expect(xAxis).toContainText('1/CM');
     await expect(yAxis).toContainText('% Transmittance');
     await expect(component).toContainText('Mattson Instruments');
-    await expect(component.locator('_react=Axis[id="x-x"]')).toBeEnabled();
-    await expect(component.locator('_react=Axis[id="y-y"]')).toBeEnabled();
+    await expect(component.locator('_react=Axis[id="x"]')).toBeEnabled();
+    await expect(component.locator('_react=Axis[id="y"]')).toBeEnabled();
 
     // axis
 
-    await expect(component.locator('_react=Axis[id=/-x$/]')).toHaveText(/.+/);
-    await expect(component.locator('_react=Axis[id=/-y$/]')).toHaveText(/.+/);
+    await expect(component.locator('_react=Axis[id="x"]')).toHaveText(/.+/);
+    await expect(component.locator('_react=Axis[id="y"]')).toHaveText(/.+/);
 
     // flip
     await component
@@ -124,8 +124,8 @@ test.describe('MeasurementPlot', () => {
     const xAxis = component.locator('_react=Axis >> nth=0');
     const yAxis = component.locator('_react=Axis >> nth=1');
 
-    await expect(component.locator('_react=Axis[id="y-x"]')).toBeEnabled();
-    await expect(component.locator('_react=Axis[id="a-y"]')).toBeEnabled();
+    await expect(component.locator('_react=Axis[id="x"]')).toBeEnabled();
+    await expect(component.locator('_react=Axis[id="y"]')).toBeEnabled();
 
     await expect(xAxis).toContainText('TRANSMITTANCE');
     await expect(yAxis).toContainText('Absorbance');
@@ -145,14 +145,14 @@ test.describe('MeasurementPlot', () => {
       />,
     );
 
-    await expect(component.locator('_react=Axis[id=/-x$/]')).toHaveText('');
+    await expect(component.locator('_react=Axis[id="x"]')).toHaveText('');
   });
   test('remove vertical axis', async ({ mount }) => {
     const component = await mount(
       <MeasurementPlot measurement={irMeasurement} showVerticalAxis={false} />,
     );
 
-    await expect(component.locator('_react=Axis[id=/-y$/]')).toHaveText('');
+    await expect(component.locator('_react=Axis[id="y"]')).toHaveText('');
   });
   test('vertical zoom', async ({ mount }) => {
     const component = await mount(

From 56616a00ee6b9c2d868b1a98464233cf8dfb7a88 Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Fri, 4 Nov 2022 11:39:32 +0100
Subject: [PATCH 5/6] refactor: remove default axis id

---
 src/app/components/MeasurementMassPlot.tsx | 18 +++---------------
 src/app/components/MeasurementPlot.tsx     |  2 --
 src/app/components/utils.tsx               | 10 +---------
 3 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/src/app/components/MeasurementMassPlot.tsx b/src/app/components/MeasurementMassPlot.tsx
index 14b58136..443582de 100644
--- a/src/app/components/MeasurementMassPlot.tsx
+++ b/src/app/components/MeasurementMassPlot.tsx
@@ -88,23 +88,11 @@ function MassComponent(props: MeasurementPlotProps) {
   );
   return (
     <BasicComponent {...props}>
-      {profile && (
-        <LineSeries
-          data={profile}
-          lineStyle={{ stroke: 'green' }}
-          xAxis="x"
-          yAxis="y"
-        />
-      )}
-      <BarSeries
-        data={peaks}
-        xAxis="x"
-        yAxis="y"
-        lineStyle={{ stroke: 'red' }}
-      />
+      {profile && <LineSeries data={profile} lineStyle={{ stroke: 'green' }} />}
+      <BarSeries data={peaks} lineStyle={{ stroke: 'red' }} />
       <Annotations>
         {bestPeaks.map(({ x, y, shortLabel }: Peak) => (
-          <Annotation.Group key={x} x={x} y={y} xAxis="x" yAxis="y">
+          <Annotation.Group key={x} x={x} y={y}>
             <Annotation.Line
               x1="0"
               x2="0"
diff --git a/src/app/components/MeasurementPlot.tsx b/src/app/components/MeasurementPlot.tsx
index 2a9989e8..ce513770 100644
--- a/src/app/components/MeasurementPlot.tsx
+++ b/src/app/components/MeasurementPlot.tsx
@@ -64,8 +64,6 @@ function MeasurementComponent(props: MeasurementPlotProps) {
           x: x.data,
           y: y.data,
         })}
-        xAxis="x"
-        yAxis="y"
       />
     </BasicComponent>
   );
diff --git a/src/app/components/utils.tsx b/src/app/components/utils.tsx
index db2709e2..b7000ccb 100644
--- a/src/app/components/utils.tsx
+++ b/src/app/components/utils.tsx
@@ -57,14 +57,10 @@ export function BasicComponent(
   }, [data, dataIndex, xVariableName, yVariableName]);
   const direction = new Set(['vertical', 'horizontal']);
   const rectZoom = useRectangularZoom({
-    horizontalAxisId: 'x',
-    verticalAxisId: 'y',
     disabled: zoom !== 'rectangular',
   });
   const axisZoom = useAxisZoom({
     direction: zoom === 'vertical' ? 'vertical' : 'horizontal',
-    horizontalAxisId: 'x',
-    verticalAxisId: 'y',
     disabled: !direction.has(zoom),
   });
   useAxisWheelZoom({
@@ -73,11 +69,9 @@ export function BasicComponent(
     disabled: !direction.has(wheelZoom),
   });
   const crossHairAnnot = useCrossHair({
-    horizontalAxisId: 'x',
-    verticalAxisId: 'y',
     disabled: !crossHair,
   });
-  usePan({ horizontalAxisId: 'x', verticalAxisId: 'y' });
+  usePan();
 
   return (
     <div
@@ -102,7 +96,6 @@ export function BasicComponent(
               {crossHairAnnot.annotations}
             </Annotations>
             <Axis
-              id="x"
               hidden={!showHorizontalAxis}
               displayPrimaryGridLines={showVerticalGrid}
               flip={flipHorizontalAxis}
@@ -110,7 +103,6 @@ export function BasicComponent(
               label={`${x.label}${x.units ? `(${x.units})` : ''}`}
             />
             <Axis
-              id="y"
               hidden={!showVerticalAxis}
               displayPrimaryGridLines={showHorizontalGrid}
               position="left"

From 3692c06b97142392452e3683f9c2e4a1ed999298 Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Fri, 4 Nov 2022 11:40:03 +0100
Subject: [PATCH 6/6] test: update plot tests

---
 tests/components/MeasurementExplorer.test.tsx | 12 +++++-----
 tests/components/MeasurementPlot.test.tsx     | 23 +++++++++++--------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/tests/components/MeasurementExplorer.test.tsx b/tests/components/MeasurementExplorer.test.tsx
index a713e49c..b4f71bfe 100644
--- a/tests/components/MeasurementExplorer.test.tsx
+++ b/tests/components/MeasurementExplorer.test.tsx
@@ -40,10 +40,10 @@ test.describe('MeasurementExplorer', () => {
     await component.locator('_react=MeasurementPlot[dataIndex=1]').isEnabled();
     await expect(
       component.locator('_react=MeasurementPlot[xVariableName="a"]'),
-    ).toBeEnabled();
+    ).toBeVisible();
     await expect(
       component.locator('_react=MeasurementPlot[yVariableName="t"]'),
-    ).toBeEnabled();
+    ).toBeVisible();
   });
   test('reverse btn', async ({ mount }) => {
     const component = await mount(
@@ -67,10 +67,10 @@ test.describe('MeasurementExplorer', () => {
     // test MeasurementPlot props after reverse
     await expect(
       component.locator('_react=MeasurementPlot[xVariableName="y"]'),
-    ).toBeEnabled();
+    ).toBeVisible();
     await expect(
       component.locator('_react=MeasurementPlot[yVariableName="x"]'),
-    ).toBeEnabled();
+    ).toBeVisible();
   });
   test('flip btn', async ({ mount }) => {
     const component = await mount(
@@ -86,13 +86,13 @@ test.describe('MeasurementExplorer', () => {
     );
 
     // test MeasurementPlot props before flipping axis
-    await expect(noFlippedPlot).toBeEnabled();
+    await expect(noFlippedPlot).toBeVisible();
     await expect(FlippedPlot).toHaveCount(0);
 
     await flipBtn.click();
 
     // test MeasurementPlot props after flipping axis
     await expect(noFlippedPlot).toHaveCount(0);
-    await expect(FlippedPlot).toBeEnabled();
+    await expect(FlippedPlot).toBeVisible();
   });
 });
diff --git a/tests/components/MeasurementPlot.test.tsx b/tests/components/MeasurementPlot.test.tsx
index 15950426..174df209 100644
--- a/tests/components/MeasurementPlot.test.tsx
+++ b/tests/components/MeasurementPlot.test.tsx
@@ -44,13 +44,14 @@ test.describe('MeasurementPlot', () => {
     await expect(xAxis).toContainText('1/CM');
     await expect(yAxis).toContainText('% Transmittance');
     await expect(component).toContainText('Mattson Instruments');
-    await expect(component.locator('_react=Axis[id="x"]')).toBeEnabled();
-    await expect(component.locator('_react=Axis[id="y"]')).toBeEnabled();
+
+    await expect(xAxis).toBeVisible();
+    await expect(yAxis).toBeVisible();
 
     // axis
 
-    await expect(component.locator('_react=Axis[id="x"]')).toHaveText(/.+/);
-    await expect(component.locator('_react=Axis[id="y"]')).toHaveText(/.+/);
+    await expect(xAxis).toHaveText(/.+/);
+    await expect(yAxis).toHaveText(/.+/);
 
     // flip
     await component
@@ -59,7 +60,7 @@ test.describe('MeasurementPlot', () => {
 
     // crossHair
     await component.hover({ position: { x: 200, y: 200 } });
-    await expect(component.locator('_react=Text')).toBeEnabled();
+    await expect(component.locator('_react=Text')).toBeVisible();
     await expect(component.locator('_react=Line')).toHaveCount(2);
     // grids
 
@@ -124,8 +125,8 @@ test.describe('MeasurementPlot', () => {
     const xAxis = component.locator('_react=Axis >> nth=0');
     const yAxis = component.locator('_react=Axis >> nth=1');
 
-    await expect(component.locator('_react=Axis[id="x"]')).toBeEnabled();
-    await expect(component.locator('_react=Axis[id="y"]')).toBeEnabled();
+    await expect(xAxis).toBeVisible();
+    await expect(yAxis).toBeVisible();
 
     await expect(xAxis).toContainText('TRANSMITTANCE');
     await expect(yAxis).toContainText('Absorbance');
@@ -135,7 +136,7 @@ test.describe('MeasurementPlot', () => {
       <MeasurementPlot measurement={irMeasurement} flipHorizontalAxis />,
     );
     const xAxis = component.locator('_react=Axis[flip=true] >> nth=0');
-    await expect(xAxis).toBeEnabled();
+    await expect(xAxis).toBeVisible();
   });
   test('remove horizontal axis', async ({ mount }) => {
     const component = await mount(
@@ -145,14 +146,16 @@ test.describe('MeasurementPlot', () => {
       />,
     );
 
-    await expect(component.locator('_react=Axis[id="x"]')).toHaveText('');
+    const xAxis = component.locator('_react=Axis >> nth=0');
+    await expect(xAxis).toHaveText('');
   });
   test('remove vertical axis', async ({ mount }) => {
     const component = await mount(
       <MeasurementPlot measurement={irMeasurement} showVerticalAxis={false} />,
     );
 
-    await expect(component.locator('_react=Axis[id="y"]')).toHaveText('');
+    const yAxis = component.locator('_react=Axis >> nth=1');
+    await expect(yAxis).toHaveText('');
   });
   test('vertical zoom', async ({ mount }) => {
     const component = await mount(