fix: validation for Percentage of Max SUV input field in TMTV module (#5417)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -22,6 +22,19 @@ const options = [
 function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
   const { t } = useTranslation('ROIThresholdConfiguration');
 
+  const handlePercentageOfMaxSUVChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value;
+
+    if (value === '.') {
+      value = '0.';
+    }
+
+    if (isNaN(Number(value)) || Number(value) < 0 || Number(value) > 1) {
+      return;
+    }
+    dispatch({ type: 'setWeight', payload: { weight: value } });
+  };
+
   return (
     <div className="bg-primary-dark flex flex-col space-y-4 p-px">
       <div className="flex items-end space-x-3">
@@ -32,12 +45,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
           <Select
             value={config.strategy}
             onValueChange={value => {
-              dispatch({
+              dispatch({ type: 'setStrategy', payload: { strategy: value } });
-                type: 'setStrategy',
-                payload: {
-                  strategy: value,
-                },
-              });
             }}
           >
             <SelectTrigger className="w-full">
@@ -81,17 +89,11 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
             <Label>{t('Percentage of Max SUV')}</Label>
           </div>
           <Input
+            data-cy="percentage-of-max-suv-input"
             className="w-full"
             type="text"
             value={config.weight}
-            onChange={e => {
+            onChange={handlePercentageOfMaxSUVChange}
-              dispatch({
-                type: 'setWeight',
-                payload: {
-                  weight: e.target.value,
-                },
-              });
-            }}
           />
         </div>
       )}
@@ -113,12 +115,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
                     type="text"
                     value={config.ctLower}
                     onChange={e => {
-                      dispatch({
+                      dispatch({ type: 'setThreshold', payload: { ctLower: e.target.value } });
-                        type: 'setThreshold',
-                        payload: {
-                          ctLower: e.target.value,
-                        },
-                      });
                     }}
                   />
                 </div>
@@ -128,12 +125,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
                     type="text"
                     value={config.ctUpper}
                     onChange={e => {
-                      dispatch({
+                      dispatch({ type: 'setThreshold', payload: { ctUpper: e.target.value } });
-                        type: 'setThreshold',
-                        payload: {
-                          ctUpper: e.target.value,
-                        },
-                      });
                     }}
                   />
                 </div>
@@ -152,12 +144,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
                     type="text"
                     value={config.ptLower}
                     onChange={e => {
-                      dispatch({
+                      dispatch({ type: 'setThreshold', payload: { ptLower: e.target.value } });
-                        type: 'setThreshold',
-                        payload: {
-                          ptLower: e.target.value,
-                        },
-                      });
                     }}
                   />
                 </div>
@@ -167,12 +154,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
                     type="text"
                     value={config.ptUpper}
                     onChange={e => {
-                      dispatch({
+                      dispatch({ type: 'setThreshold', payload: { ptUpper: e.target.value } });
-                        type: 'setThreshold',
-                        payload: {
-                          ptUpper: e.target.value,
-                        },
-                      });
                     }}
                   />
                 </div>

tests/TMTVCSVReport.spec.ts

@@ -2,7 +2,6 @@ import { test, expect } from 'playwright-test-coverage';
 import { visitStudy, simulateNormalizedClickOnElement } from './utils/index';
 import { viewportLocator } from './utils/locators';
 import { downloadAsString } from './utils/download';
-import toArray from 'extensions/dicom-microscopy/src/utils/toArray';
 
 test('should create and download the TMTV CSV report correctly', async ({ page }) => {
   const studyInstanceUID = '1.2.840.113619.2.290.3.3767434740.226.1600859119.501';

tests/TMTVSUV.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from 'playwright-test-coverage';
+import { visitStudy, simulateNormalizedClickOnElement } from './utils/index';
+import { viewportLocator } from './utils/locators';
+import { downloadAsString } from './utils/download';
+
+test('should restrict the percentage of max SUV to be between 0 and 1', async ({ page }) => {
+  const studyInstanceUID = '1.2.840.113619.2.290.3.3767434740.226.1600859119.501';
+  const mode = 'tmtv';
+  await visitStudy(page, studyInstanceUID, mode, 10000);
+
+  await viewportLocator({ viewportId: 'ptAXIAL', page }).click();
+
+  await page.getByTestId('addSegmentation').click();
+  await page.getByTestId('RectangleROIStartEndThreshold-btn').click();
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('0');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('0.27');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.27');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('0.9467');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.9467');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('.');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('1');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('1');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('1.1');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('1');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('1806');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('1');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('');
+
+  // Add some valid input for the tests that follow. Note that when invalid input is
+  // entered the previous valid input is retained.
+  await page.getByTestId('percentage-of-max-suv-input').fill('0.275');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('9');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.275');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('-678');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.275');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('+');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.275');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('-');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.275');
+
+  await page.getByTestId('percentage-of-max-suv-input').fill('e');
+  expect(await page.getByTestId('percentage-of-max-suv-input').inputValue()).toBe('0.275');
+});