feat(4D): Add 4D dynamic volume rendering and new pre-clinical 4d pt/ct mode (#3664)

Co-authored-by: Alireza <ar.sedghi@gmail.com>
Co-authored-by: Neil <neil.a.macphee@gmail.com>

platform/ui/src/components/InputNumber/InputNumber.tsx

@@ -5,6 +5,9 @@ import './InputNumber.css';
 import Label from '../Label';
 import getMaxDigits from '../../utils/getMaxDigits';
 
+const arrowHorizontalClassName =
+  'cursor-pointer text-primary-active active:text-primary-light hover:opacity-70 w-4 flex items-center justify-center';
+
 /**
  *  React Number Input component'
  * it has two props, value and onChange
@@ -16,6 +19,7 @@ import getMaxDigits from '../../utils/getMaxDigits';
 
 const sizesClasses = {
   sm: 'w-[45px] h-[28px]',
+  md: 'w-[58px] h-[28px]',
   lg: 'w-[206px] h-[35px]',
 };
 
@@ -25,11 +29,16 @@ const InputNumber: React.FC<{
   minValue?: number;
   maxValue?: number;
   step?: number;
-  size?: 'sm' | 'lg';
+  size?: 'sm' | 'lg' | 'md';
   className?: string;
   labelClassName?: string;
   label?: string;
   showAdjustmentArrows?: boolean;
+  arrowsDirection: 'vertical' | 'horizontal';
+  labelPosition?: 'left' | 'bottom' | 'right' | 'top';
+  inputClassName?: string;
+  sizeClassName?: string;
+  inputContainerClassName?: string;
 }> = ({
   value,
   onChange,
@@ -38,19 +47,24 @@ const InputNumber: React.FC<{
   size = 'sm',
   minValue = 0,
   maxValue = 100,
-  labelClassName,
+  labelClassName = 'text-aqua-pale text-[11px] mx-auto',
   label,
   showAdjustmentArrows = true,
+  arrowsDirection = 'vertical',
+  labelPosition = 'left',
+  inputClassName = 'text-white bg-primary-dark text-[14px]',
+  sizeClassName,
+  inputContainerClassName = 'bg-primary-dark border-secondary-light border rounded-[4px]',
 }) => {
   const [numberValue, setNumberValue] = useState(value);
   const [isFocused, setIsFocused] = useState(false);
 
   const maxDigits = getMaxDigits(maxValue, step);
   const inputWidth = Math.max(maxDigits * 10, showAdjustmentArrows ? 20 : 28);
-  const arrowWidth = showAdjustmentArrows ? 20 : 0;
-  const containerWidth = `${inputWidth + arrowWidth}px`;
   const decimalPlaces = Number.isInteger(step) ? 0 : step.toString().split('.')[1].length;
 
+  const sizeToUse = sizeClassName ? sizeClassName : sizesClasses[size];
+
   useEffect(() => {
     setNumberValue(value);
   }, [value]);
@@ -95,21 +109,31 @@ const InputNumber: React.FC<{
   const increment = () => updateValue(parseFloat(numberValue) + step);
   const decrement = () => updateValue(parseFloat(numberValue) - step);
 
+  const labelElement = label && (
+    <Label
+      className={labelClassName}
+      text={label}
+    />
+  );
+
   return (
-    <div className="flex flex-1 flex-col">
-      {label && (
-        <Label
-          className={labelClassName}
-          text={label}
-        />
-      )}
+    <div
+      className={`flex overflow-hidden ${className} ${labelPosition === 'top' || labelPosition === 'bottom' ? 'flex-col' : 'flex-row'}`}
+    >
+      {label && labelPosition === 'left' && labelElement}
+      {label && labelPosition === 'top' && labelElement}
       <div
-        className={`border-secondary-light flex items-center justify-center overflow-hidden rounded-md border-2 bg-black px-1 ${
-          sizesClasses[size]
-        } ${className || ''}`}
-        style={{ width: containerWidth }}
+        className={`flex flex-grow items-center overflow-hidden ${sizeToUse} ${inputContainerClassName}`}
       >
-        <div className="flex">
+        <div className="flex w-full">
+          {showAdjustmentArrows && arrowsDirection === 'horizontal' && (
+            <div
+              className={arrowHorizontalClassName}
+              onClick={() => decrement()}
+            >
+              <Icon name="arrow-left-small" />
+            </div>
+          )}
           <input
             type="number"
             value={isFocused ? numberValue : parseFloat(numberValue).toFixed(decimalPlaces)}
@@ -117,11 +141,19 @@ const InputNumber: React.FC<{
             onFocus={handleFocus}
             onBlur={handleBlur}
             onChange={handleChange}
-            className={'input-number w-full bg-black text-center text-[12px] text-white'}
+            className={`input-number ${inputClassName} w-full flex-grow text-center`}
             style={{ width: inputWidth }}
           />
-          {showAdjustmentArrows && (
-            <div className="up-arrowsize flex flex-col items-center justify-around">
+          {showAdjustmentArrows && arrowsDirection === 'horizontal' && (
+            <div
+              className={arrowHorizontalClassName}
+              onClick={() => increment()}
+            >
+              <Icon name="arrow-right-small" />
+            </div>
+          )}
+          {showAdjustmentArrows && arrowsDirection === 'vertical' && (
+            <div className="up-arrowsize ml-auto flex flex-shrink-0 flex-col items-center justify-around pr-1">
               <ArrowButton
                 onClick={increment}
                 rotate
@@ -131,6 +163,8 @@ const InputNumber: React.FC<{
           )}
         </div>
       </div>
+      {label && labelPosition === 'right' && labelElement}
+      {label && labelPosition === 'bottom' && labelElement}
     </div>
   );
 };