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({
-                type: 'setStrategy',
-                payload: {
-                  strategy: value,
-                },
-              });
+              dispatch({ 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 => {
-              dispatch({
-                type: 'setWeight',
-                payload: {
-                  weight: e.target.value,
-                },
-              });
-            }}
+            onChange={handlePercentageOfMaxSUVChange}
           />
         </div>
       )}
@@ -113,12 +115,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
                     type="text"
                     value={config.ctLower}
                     onChange={e => {
-                      dispatch({
-                        type: 'setThreshold',
-                        payload: {
-                          ctLower: e.target.value,
-                        },
-                      });
+                      dispatch({ 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({
-                        type: 'setThreshold',
-                        payload: {
-                          ctUpper: e.target.value,
-                        },
-                      });
+                      dispatch({ 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({
-                        type: 'setThreshold',
-                        payload: {
-                          ptLower: e.target.value,
-                        },
-                      });
+                      dispatch({ 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({
-                        type: 'setThreshold',
-                        payload: {
-                          ptUpper: e.target.value,
-                        },
-                      });
+                      dispatch({ type: 'setThreshold', payload: { ptUpper: e.target.value } });
                     }}
                   />
                 </div>