fix(config): support more values for the useSharedArrayBuffer (#3688)

platform/ui/src/components/AdvancedToolbox/ToolSettings.tsx

@@ -35,7 +35,7 @@ function ToolSettings({ options }) {
               className="flex items-center"
               key={option.id}
             >
-              <div className="w-1/3 text-xs text-[13px]">{option.name}</div>
+              <div className="w-1/3 text-[13px]">{option.name}</div>
               <div className="w-2/3">
                 <InputRange
                   minValue={option.min}
@@ -45,7 +45,7 @@ function ToolSettings({ options }) {
                   onChange={e => option.onChange(e)}
                   allowNumberEdit={true}
                   showAdjustmentArrows={false}
-                  inputClassName="ml-2 w-4/5"
+                  inputClassName="ml-1 w-4/5"
                 />
               </div>
             </div>

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

@@ -43,11 +43,13 @@ const InputNumber: React.FC<{
   showAdjustmentArrows = true,
 }) => {
   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;
 
   useEffect(() => {
     setNumberValue(value);
@@ -81,8 +83,17 @@ const InputNumber: React.FC<{
     onChange(newValue);
   };
 
-  const increment = () => updateValue(numberValue + step);
-  const decrement = () => updateValue(numberValue - step);
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setNumberValue(parseFloat(numberValue).toFixed(decimalPlaces));
+  };
+
+  const increment = () => updateValue(parseFloat(numberValue) + step);
+  const decrement = () => updateValue(parseFloat(numberValue) - step);
 
   return (
     <div className="flex flex-1 flex-col">
@@ -101,8 +112,10 @@ const InputNumber: React.FC<{
         <div className="flex">
           <input
             type="number"
-            value={numberValue}
+            value={isFocused ? numberValue : parseFloat(numberValue).toFixed(decimalPlaces)}
             step={step}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
             onChange={handleChange}
             className={'input-number w-full bg-black text-center text-[12px] text-white'}
             style={{ width: inputWidth }}

platform/ui/src/components/InputNumber/__stories__/inputNumber.stories.mdx

@@ -34,10 +34,10 @@ InputNumber is a component that allows you to use as a number value
   <Story
     name="Overview"
     args={{
-      step: 1,
-      value: 1000,
-      minValue: 0,
-      maxValue: 1000,
+      step: 0.5,
+      value: 15,
+      minValue: 0.5,
+      maxValue: 99.5,
       size: 'sm',
       showAdjustmentArrows: true,
       onChange: () => console.log('input range change'),

platform/ui/src/components/InputRange/InputRange.tsx

@@ -57,10 +57,11 @@ const InputRange: React.FC<InputRangeProps> = ({
   const handleChange = useCallback(
     e => {
       const val = Number(e.target.value);
-      setRangeValue(val);
-      onChange(val);
+      const roundedVal = Math.round(val / step) * step;
+      setRangeValue(roundedVal);
+      onChange(roundedVal);
     },
-    [onChange]
+    [onChange, step]
   );
 
   const rangeValuePercentage = ((rangeValue - minValue) / (maxValue - minValue)) * 100;
@@ -92,8 +93,10 @@ const InputRange: React.FC<InputRangeProps> = ({
         e.preventDefault();
       }}
     >
-      <div className="relative flex w-full items-center">
-        {showLabel && labelPosition === 'left' && LabelOrEditableNumber}
+      <div className="relative flex w-full items-center space-x-2">
+        {showLabel && labelPosition === 'left' && (
+          <div style={{ width: labelWidth }}>{LabelOrEditableNumber}</div>
+        )}
         <div className="range-track"></div>
         <input
           type="range"

platform/ui/src/utils/getMaxDigits.ts

@@ -5,8 +5,14 @@
  * @returns The maximum number of digits required to display a value.
  */
 const getMaxDigits = (maxValue: number, step: number) => {
-  const integerDigits = maxValue.toString().length;
+  if (step <= 0) {
+    throw new Error('Step should be greater than zero');
+  }
+
+  // Get the number of integer digits for maxValue
+  const integerDigits = maxValue.toString().split('.')[0].length;
   const decimalDigits = step % 1 === 0 ? 0 : step.toString().split('.')[1].length;
+
   return integerDigits + (decimalDigits ? decimalDigits + 1 : 0);
 };