Added unit conversion feature in constants block and internal code frequency input (#272)

* added unit conversion feature in all constant and code internal frequency

* improved unit conversion feature decimal included in frequency

* added comments for unitConversion,handleFunction and regex statement

* added negative value support, fixed unwanted comma code

Author: BkPankaj

frontend/src/components/blocks/basic/code/code-widget.tsx

@@ -8,6 +8,7 @@ import { GlobalState } from '../../../../core/store';
 import BaseBlock, { ContextOption } from '../../common/base-block';
 import BasePort from '../../common/base-port';
 import { CodeBlockModel } from './code-model';
+import {unitConversion} from '../../../utils/tooltip/index'
 import './styles.scss';
 
 
@@ -87,7 +88,7 @@ export class CodeBlockWidget extends React.Component<CodeBlockWidgetProps, CodeB
                                     InputProps={{
                                         endAdornment: <InputAdornment position="start">Hz</InputAdornment>,
                                     }}
-                                    type="number"
+                                    type="text"
                                     margin="dense"
                                     value={this.state.frequency}
                                     onChange={this.handleFrequencyInput}
@@ -173,8 +174,14 @@ export class CodeBlockWidget extends React.Component<CodeBlockWidgetProps, CodeB
     }
 
     handleFrequencyInput = (event: ChangeEvent<HTMLInputElement>) => {
+        // Convert the input value using a unit conversion function (it returns a string)
+        const actual_val = parseFloat(unitConversion(event.target.value));
+
+        // Update the component state with the raw input value
         this.setState({frequency: event.target.value});
-        this.props.node.data.frequency = event.target.value;
+
+        // Update the frequency data in the component's props with the parsed numerical value (actual_val)
+        this.props.node.data.frequency = actual_val;
     }
 
     /**

frontend/src/components/blocks/basic/constant/constant-widget.tsx

@@ -6,6 +6,7 @@ import { GlobalState } from '../../../../core/store';
 import BaseBlock, { ContextOption } from '../../common/base-block';
 import BasePort from '../../common/base-port';
 import { ConstantBlockModel } from './constant-model';
+import {unitConversion} from '../../../utils/tooltip/index'
 import './styles.scss';
 
 /**
@@ -98,9 +99,15 @@ export class ConstantBlockWidget extends React.Component<ConstantBlockWidgetProp
      * @param event Change event from constant input field
      */
     handleInput = (event: ChangeEvent<HTMLInputElement>) => {
-        this.setState({ value: event.target.value });
+        // Convert the input value using a unit conversion function
+        const actual_val = unitConversion(event.target.value);
+       
+        // Update the component state with the raw input value
+        this.setState({ value: event.target.value});
+       
+        // Check if the component has associated data in its props
         if (this.props.node.data) {
-            this.props.node.data.value = event.target.value
+            this.props.node.data.value = actual_val; // Update the value data in the component's props with the converted value
         }
     }
 }

frontend/src/components/utils/tooltip/index.tsx

@@ -13,6 +13,63 @@ const useStyles = makeStyles((theme: Theme) => ({
     }
 }));
 
+// Function for unit conversion in a given input string
+export const unitConversion  = (input: string): string => {
+  
+  // Define a multiplier object for unit conversions
+  const multiplier: { [key: string]: number } = {
+        'k': 1000,
+        'M': 1000000,
+        'm': 0.001,
+        'K': 1000,
+      };
+    
+      const values = input.split(',');  // Split input string by commas to handle multiple values
+
+      // Map over each value to perform unit conversion
+      const convertedValues = values.map((value) => {
+
+        /*
+          Regular expression to match and capture components of a value:
+          - (-?): Captures an optional negative sign.
+          - (\d*\.?\d+): Captures the numeric part of the value, which may include digits, an optional decimal point,
+                         and 
+          - ([kKmM]?): Captures the unit part of the value, which may be 'k', 'K', 'm', or 'M', and is optional.
+          - $: Asserts the end of the string, ensuring the match occurs at the end of the value.
+          The result is stored in the 'match' variable, containing an array with the full matched value,
+        */
+        const match = value.match(/(-?)(\d*\.?\d+)([kKmM]?)$/);
+        
+        // Check if a match is found
+        if (match) {
+
+          // Extract negative sign, numeric value, and unit from the match
+          const negativeSign = match[1] || '';
+          const numericValue = parseFloat(negativeSign + match[2]);
+          const unit = match[3] || '';
+
+          // Check if the unit is present in the multiplier object
+          if (multiplier.hasOwnProperty(unit)) {
+
+            // Perform unit conversion and return the result as a string
+            const result = numericValue * multiplier[unit]; 
+            return result.toString();
+
+          } else {
+
+            // If unit not found, return the numeric value as a string
+            return numericValue.toString();
+
+          }
+        }
+    
+        // Return the original value if it doesn't match the expected format
+        return value;
+      });
+
+      return convertedValues.join(','); // Join the converted values back into a comma-separated string and return
+  };
+
 /**
  * 
  * Tooltip with an arrow