DSEGOG-128 Image centroids/crosshairs

e2e/mocked/plotting.spec.ts

@@ -34,7 +34,7 @@ test('plots a time vs shotnum graph and change the plot colour', async ({
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   expect(
     await chart.screenshot({
       type: 'png',
@@ -80,7 +80,7 @@ test('plots a shotnum vs channel graph with logarithmic scales', async ({
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   expect(
     await chart.screenshot({
       type: 'png',
@@ -108,11 +108,11 @@ test('user can zoom and pan the graph', async ({ page }) => {
 
   await popup.locator('[aria-label="close settings"]').click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   await chart.click();
 
   // test drag to zoom
-  await popup.dragAndDrop('#my-chart', '#my-chart', {
+  await popup.dragAndDrop('.chartjs-chart', '.chartjs-chart', {
     sourcePosition: {
       x: 250,
       y: 120,
@@ -130,7 +130,7 @@ test('user can zoom and pan the graph', async ({ page }) => {
   await popup.mouse.wheel(-10, 0);
 
   await popup.keyboard.down('Shift');
-  await popup.dragAndDrop('#my-chart', '#my-chart', {
+  await popup.dragAndDrop('.chartjs-chart', '.chartjs-chart', {
     sourcePosition: {
       x: 150,
       y: 150,
@@ -221,7 +221,7 @@ test('plots multiple channels on the y axis', async ({ page }) => {
 
   await popup.locator('[aria-label="close settings"]').click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
@@ -268,7 +268,7 @@ test('user can hide gridlines and axes labels', async ({ page }) => {
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   expect(
     await chart.screenshot({
@@ -314,7 +314,7 @@ test('user can add from and to dates to timestamp on x-axis', async ({
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   expect(
     await chart.screenshot({
@@ -363,7 +363,7 @@ test('user can add min and max limits to x- and y-axis', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   expect(
     await chart.screenshot({
       type: 'png',
@@ -412,7 +412,7 @@ test('user can change line style of plotted channels', async ({ page }) => {
 
   await popup.locator('[aria-label="close settings"]').click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
@@ -470,7 +470,7 @@ test('user can change the marker style and size of plotted channels', async ({
 
   await popup.locator('[aria-label="close settings"]').click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
@@ -526,7 +526,7 @@ test('changes to and from dateTimes to use 0 seconds and 59 seconds respectively
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   expect(
     await chart.screenshot({
       type: 'png',
@@ -571,7 +571,7 @@ test('user can change the line width of plotted channels', async ({ page }) => {
 
   await popup.locator('[aria-label="close settings"]').click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
@@ -655,7 +655,7 @@ test('user can plot channels on the right y axis', async ({ page }) => {
 
   await popup.locator('[aria-label="close settings"]').click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
@@ -685,7 +685,7 @@ test('user can customize left y axis label', async ({ page }) => {
   await popup.getByRole('option', { name: 'Shot Number', exact: true }).click();
   await popup.getByRole('textbox', { name: 'Label' }).type('left y axis');
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   expect(
     await chart.screenshot({
@@ -713,7 +713,7 @@ test('user can customize right y axis label', async ({ page }) => {
   await popup.getByRole('option', { name: 'Shot Number', exact: true }).click();
   await popup.getByRole('textbox', { name: 'Label' }).type('right y axis');
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   expect(
     await chart.screenshot({
@@ -749,7 +749,7 @@ test('user can customize both left and right y axis labels', async ({
     .click();
   await popup.getByRole('textbox', { name: 'Label' }).type('right y axis');
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   expect(
     await chart.screenshot({

e2e/mocked/traces.spec.ts

@@ -30,7 +30,7 @@ test('user can show points for the trace', async ({ page }) => {
 
   await popup.getByRole('button', { name: 'Show points' }).click();
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
 
@@ -54,11 +54,11 @@ test('user can zoom and pan the trace', async ({ page }) => {
       .click(),
   ]);
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   await chart.click();
 
   // test drag to zoom
-  await popup.dragAndDrop('#my-chart', '#my-chart', {
+  await popup.dragAndDrop('.chartjs-chart', '.chartjs-chart', {
     sourcePosition: {
       x: 250,
       y: 180,
@@ -76,7 +76,7 @@ test('user can zoom and pan the trace', async ({ page }) => {
   await popup.mouse.wheel(-10, 0);
 
   await popup.keyboard.down('Shift');
-  await popup.dragAndDrop('#my-chart', '#my-chart', {
+  await popup.dragAndDrop('.chartjs-chart', '.chartjs-chart', {
     sourcePosition: {
       x: 150,
       y: 150,
@@ -135,7 +135,7 @@ test('user can change trace via clicking on a thumbnail', async ({ page }) => {
       .click(),
   ]);
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // wait for first chart to load before loading new chart
   await chart.click();

e2e/real/functions.spec.ts

@@ -51,7 +51,7 @@ test('scalar functions can be plotted', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   expect(
     await chart.screenshot({
       type: 'png',

e2e/real/images.spec.ts

@@ -52,19 +52,21 @@ test('user can change the false colour parameters of an image', async ({
   const imgAltText = title.split(' - ')[1];
 
   const image = await popup.getByAltText(imgAltText);
+  // assert src has loaded before storing the old image src
+  await expect(image).toHaveAttribute('src');
   const oldImageSrc = await image.getAttribute('src');
   const colourbar = await popup.getByAltText('Colour bar');
 
   await popup.getByLabel('Colour Map').click();
 
   await popup.getByRole('option', { name: 'cividis' }).click();
 
-  expect(
-    await popup.getByRole('checkbox', { name: 'Reverse Colour' })
+  await expect(
+    popup.getByRole('checkbox', { name: 'Reverse Colour' })
   ).not.toBeChecked();
   await popup.getByRole('checkbox', { name: 'Reverse Colour' }).click();
-  expect(
-    await popup.getByRole('checkbox', { name: 'Reverse Colour' })
+  await expect(
+    popup.getByRole('checkbox', { name: 'Reverse Colour' })
   ).toBeChecked();
 
   const slider = await popup.getByRole('slider', {
@@ -91,7 +93,7 @@ test('user can change the false colour parameters of an image', async ({
     },
   });
 
-  expect(await slider.nth(0).getAttribute('value')).toBe(`${0.4 * 255}`);
+  await expect(slider.nth(0)).toHaveValue(`${0.4 * 255}`);
 
   const ulSliderThumb = await popup
     .locator('.MuiSlider-thumb', {
@@ -106,7 +108,7 @@ test('user can change the false colour parameters of an image', async ({
     },
   });
 
-  expect(await slider.nth(1).getAttribute('value')).toBe(`${0.8 * 255}`);
+  await expect(slider.nth(1)).toHaveValue(`${0.8 * 255}`);
 
   // blur to avoid focus tooltip appearing in snapshot
   await slider.nth(0).blur();
@@ -145,14 +147,16 @@ test('user can disable false colour', async ({ page }) => {
   const imgAltText = title.split(' - ')[1];
 
   const image = await popup.getByAltText(imgAltText);
+  // assert src has loaded before storing the old image src
+  await expect(image).toHaveAttribute('src');
   const oldImageSrc = await image.getAttribute('src');
 
-  expect(
-    await popup.getByRole('checkbox', { name: 'False colour' })
+  await expect(
+    popup.getByRole('checkbox', { name: 'False colour' })
   ).toBeChecked();
   await popup.getByRole('checkbox', { name: 'False colour' }).click();
-  expect(
-    await popup.getByRole('checkbox', { name: 'False colour' })
+  await expect(
+    popup.getByRole('checkbox', { name: 'False colour' })
   ).not.toBeChecked();
 
   // wait for new image to have loaded
@@ -181,9 +185,12 @@ test('user can change image via clicking on a thumbnail', async ({ page }) => {
 
   const canvas = await popup.getByTestId('overlay');
 
-  const oldImageSrc = await popup
-    .getByAltText((await popup.title()).split(' - ')[1])
-    .getAttribute('src');
+  const oldImage = await popup.getByAltText(
+    (await popup.title()).split(' - ')[1]
+  );
+  // assert src has loaded before storing the old image src
+  await expect(oldImage).toHaveAttribute('src');
+  const oldImageSrc = await oldImage.getAttribute('src');
 
   await popup
     .getByAltText('PM-201-PA1-CAM-2 image', { exact: false })
@@ -283,6 +290,79 @@ test('user can set their default colourmap', async ({ page }) => {
   ).toMatchSnapshot();
 });
 
+test('user can use crosshairs mode and view intensity graphs', async ({
+  page,
+}) => {
+  // open up popup
+  const [popup] = await Promise.all([
+    page.waitForEvent('popup'),
+    page
+      .getByAltText('D100 pre-amp 1 FF [micro] image', { exact: false })
+      .first()
+      .click(),
+  ]);
+
+  const title = await popup.title();
+  const imgAltText = title.split(' - ')[1];
+
+  const image = await popup.getByAltText(imgAltText);
+
+  // get into cross hairs mode
+  await expect(
+    popup.getByRole('checkbox', { name: 'Centroid / Cross Hairs' })
+  ).not.toBeChecked();
+  await popup.getByRole('checkbox', { name: 'Centroid / Cross Hairs' }).click();
+  await expect(
+    popup.getByRole('checkbox', { name: 'Centroid / Cross Hairs' })
+  ).toBeChecked();
+
+  const charts = await popup.locator('.chartjs-chart');
+  await expect(charts).toHaveCount(2);
+  await expect(charts.first()).toBeVisible();
+  await expect(charts.last()).toBeVisible();
+
+  const centroidPosition = [101, 95];
+  const FWHMs = [55, 52];
+  await expect(
+    popup.getByText(
+      `Position: (${centroidPosition[0]}, ${centroidPosition[1]})`
+    )
+  ).toBeVisible();
+  await expect(popup.getByText(`X FWHM: ${FWHMs[0]}`)).toBeVisible();
+  await expect(popup.getByText(`Y FWHM: ${FWHMs[1]}`)).toBeVisible();
+
+  // expect crosshairs to be drawn on image at the centroid & intensity plots to be drawn & positioned correctly
+  expect(
+    await popup.getByTestId('image-panel').screenshot({
+      type: 'png',
+      style:
+        // hide image controls panel & top buttons from the screenshot as it's not important
+        '[data-testid="image-controls-panel"], [aria-label="image actions"] { display: none !important; }',
+    })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+
+  // check that clicking the image changes the crosshairs position & causes a data fetch
+  // for some reason playwright has an off by 1 error in the y-pos in chrome, it works fine when testing manually
+  // i.e. clicking top left-most pixel results in (0,0)
+  await image.click({
+    position: { x: 150, y: 51 },
+  });
+
+  await expect(popup.getByText('Position: (150, 50)')).toBeVisible();
+  const newFWHMs = [5, 50];
+  await expect(popup.getByText(`X FWHM: ${newFWHMs[0]}`)).toBeVisible();
+  await expect(popup.getByText(`Y FWHM: ${newFWHMs[1]}`)).toBeVisible();
+
+  expect(
+    await popup.getByTestId('image-panel').screenshot({
+      type: 'png',
+      style:
+        // hide image controls panel & top buttons from the screenshot as it's not important
+        '[data-testid="image-controls-panel"], [aria-label="image actions"] { display: none !important; }',
+    })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+});
+
 test('user can export image', async ({ page }) => {
   // open up popup
   const [popup] = await Promise.all([

e2e/real/plotting.spec.ts

@@ -34,7 +34,7 @@ test('plots a time vs channel graph', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
 
@@ -90,7 +90,7 @@ test('plots a channel vs channel graph', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
   // need this to wait for canvas animations to execute
   await popup.waitForTimeout(1000);
 

e2e/real/traces.spec.ts

@@ -35,7 +35,7 @@ test('user can view traces and change trace via clicking on a thumbnail', async
       .click(),
   ]);
 
-  const chart = await popup.locator('#my-chart');
+  const chart = await popup.locator('.chartjs-chart');
 
   // wait for first chart to load
   await expect(popup.getByRole('progressbar')).toBeVisible();
@@ -85,7 +85,7 @@ test('user can export trace image and data', async ({ page }) => {
       .click(),
   ]);
 
-  await popup.locator('#my-chart');
+  await popup.locator('.chartjs-chart');
 
   const title = await popup.title();
   const traceName = title.split(' - ')[1];