[docs]: Enhanced the formatting of "Translating JavaScript Objects to…

… Python in RunPy" in the "How To" section (#9490)

* Enhanced the formatting use to_py function in runpy

* add the changes into version 2.36.0

* revert package.json and docusaurus files

* addressed the changes in the review

docs/docs/how-to/use-to-py.md

@@ -4,7 +4,7 @@ title: "Translating JavaScript Objects to Python in RunPy"
 ---
 <div style={{paddingBottom:'24px'}}>
 
-This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
+This guide demonstrates the utilization of the `to_py()` function in *RunPy* queries for converting JavaScript objects into their corresponding Python representations.
 
 </div>
 
@@ -24,7 +24,11 @@ Similar to **to_js()**, **to_py()** facilitates the mapping and conversion of da
 
 ## Using the to_py() Function
 
-Here's an example demonstrating the application of the to_py() function:
+To test the working of `to_py`function, follow the steps mentioned below:
+
+- From the ToolJet dashboard, create a new app by clicking **Create an app** button.
+- Once the app is created, navigate to the Query Panel, click on the **+ Add** button and choose **Run Python Code** as the Data Source.
+- Use the code given below, in the *runpy* query code editor:
 
 ```python
 import pyodide # Import the Pyodide library
@@ -39,7 +43,7 @@ my_py_dict = to_py(my_js_object) # Convert the JavaScript object to a Python dic
 my_py_dict # Return the Python dictionary
 ```
 
-In this example, a JavaScript object `my_js_object` is created using the Object.fromEntries() method, representing a dictionary-like structure. The to_py() function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
+In this example, a JavaScript object `my_js_object` is created using the `Object.fromEntries()` method, representing a dictionary-like structure. The `to_py()` function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
 
 The output will be:
 ```json
@@ -56,13 +60,13 @@ Both **to_js()** and **to_py()** functions offer a convenient means to exchange
 
 ## Why the Use of to_py() is Essential?
 
-When previewing results in a RunPy query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in Pyodide. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
+- When previewing results in a *RunPy* query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in **Pyodide**. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
 
-Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
+- Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
 
-Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
+- Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
 
-To maintain consistency between JSON and Raw representations, the **to_js()** function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
+- To maintain consistency between JSON and Raw representations, the `to_js()` function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
 
 <div style={{textAlign: 'center'}}>
  <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/to_py/topy.gif" alt="Print data from multiple tabs" />

docs/versioned_docs/version-2.30.0/how-to/use-to-py.md

@@ -2,8 +2,13 @@
 id: use-to-py-function-in-runpy
 title: "Translating JavaScript Objects to Python in RunPy"
 ---
+<div style={{paddingBottom:'24px'}}>
 
-This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
+This guide demonstrates the utilization of the `to_py()` function in *RunPy* queries for converting JavaScript objects into their corresponding Python representations.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
 ## The to_py() Function
 
@@ -13,9 +18,17 @@ Similar to **to_js()**, **to_py()** facilitates the mapping and conversion of da
 
 **Note**: Refer to the **[RunPy](/docs/data-sources/run-py)** documentation for a more in-depth understanding.
 
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
 ## Using the to_py() Function
 
-Here's an example demonstrating the application of the to_py() function:
+To test the working of `to_py`function, follow the steps mentioned below:
+
+- From the ToolJet dashboard, create a new app by clicking **Create an app** button.
+- Once the app is created, navigate to the Query Panel, click on the **+ Add** button and choose **Run Python Code** as the Data Source.
+- Use the code given below, in the *runpy* query code editor:
 
 ```python
 import pyodide # Import the Pyodide library
@@ -30,7 +43,7 @@ my_py_dict = to_py(my_js_object) # Convert the JavaScript object to a Python dic
 my_py_dict # Return the Python dictionary
 ```
 
-In this example, a JavaScript object `my_js_object` is created using the Object.fromEntries() method, representing a dictionary-like structure. The to_py() function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
+In this example, a JavaScript object `my_js_object` is created using the `Object.fromEntries()` method, representing a dictionary-like structure. The `to_py()` function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
 
 The output will be:
 ```json
@@ -41,16 +54,22 @@ By leveraging to_py(), JavaScript objects can seamlessly transition into Python
 
 Both **to_js()** and **to_py()** functions offer a convenient means to exchange data between Python and JavaScript in Pyodide, enabling the utilization of both languages' strengths in a unified environment.
 
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
 ## Why the Use of to_py() is Essential?
 
-When previewing results in a RunPy query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in Pyodide. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
+- When previewing results in a *RunPy* query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in **Pyodide**. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
 
-Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
+- Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
 
-Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
+- Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
 
-To maintain consistency between JSON and Raw representations, the **to_js()** function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
+- To maintain consistency between JSON and Raw representations, the `to_js()` function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
 
 <div style={{textAlign: 'center'}}>
  <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/to_py/topy.gif" alt="Print data from multiple tabs" />
+</div>
+
 </div>

docs/versioned_docs/version-2.33.0/how-to/use-to-py.md

@@ -4,7 +4,7 @@ title: "Translating JavaScript Objects to Python in RunPy"
 ---
 <div style={{paddingBottom:'24px'}}>
 
-This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
+This guide demonstrates the utilization of the `to_py()` function in *RunPy* queries for converting JavaScript objects into their corresponding Python representations.
 
 </div>
 
@@ -24,7 +24,11 @@ Similar to **to_js()**, **to_py()** facilitates the mapping and conversion of da
 
 ## Using the to_py() Function
 
-Here's an example demonstrating the application of the to_py() function:
+To test the working of `to_py`function, follow the steps mentioned below:
+
+- From the ToolJet dashboard, create a new app by clicking **Create an app** button.
+- Once the app is created, navigate to the Query Panel, click on the **+ Add** button and choose **Run Python Code** as the Data Source.
+- Use the code given below, in the *runpy* query code editor:
 
 ```python
 import pyodide # Import the Pyodide library
@@ -39,7 +43,7 @@ my_py_dict = to_py(my_js_object) # Convert the JavaScript object to a Python dic
 my_py_dict # Return the Python dictionary
 ```
 
-In this example, a JavaScript object `my_js_object` is created using the Object.fromEntries() method, representing a dictionary-like structure. The to_py() function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
+In this example, a JavaScript object `my_js_object` is created using the `Object.fromEntries()` method, representing a dictionary-like structure. The `to_py()` function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
 
 The output will be:
 ```json
@@ -56,13 +60,13 @@ Both **to_js()** and **to_py()** functions offer a convenient means to exchange
 
 ## Why the Use of to_py() is Essential?
 
-When previewing results in a RunPy query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in Pyodide. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
+- When previewing results in a *RunPy* query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in **Pyodide**. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
 
-Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
+- Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
 
-Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
+- Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
 
-To maintain consistency between JSON and Raw representations, the **to_js()** function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
+- To maintain consistency between JSON and Raw representations, the `to_js()` function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
 
 <div style={{textAlign: 'center'}}>
  <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/to_py/topy.gif" alt="Print data from multiple tabs" />

docs/versioned_docs/version-2.34.0/how-to/use-to-py.md

@@ -4,7 +4,7 @@ title: "Translating JavaScript Objects to Python in RunPy"
 ---
 <div style={{paddingBottom:'24px'}}>
 
-This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
+This guide demonstrates the utilization of the `to_py()` function in *RunPy* queries for converting JavaScript objects into their corresponding Python representations.
 
 </div>
 
@@ -24,7 +24,11 @@ Similar to **to_js()**, **to_py()** facilitates the mapping and conversion of da
 
 ## Using the to_py() Function
 
-Here's an example demonstrating the application of the to_py() function:
+To test the working of `to_py`function, follow the steps mentioned below:
+
+- From the ToolJet dashboard, create a new app by clicking **Create an app** button.
+- Once the app is created, navigate to the Query Panel, click on the **+ Add** button and choose **Run Python Code** as the Data Source.
+- Use the code given below, in the *runpy* query code editor:
 
 ```python
 import pyodide # Import the Pyodide library
@@ -39,7 +43,7 @@ my_py_dict = to_py(my_js_object) # Convert the JavaScript object to a Python dic
 my_py_dict # Return the Python dictionary
 ```
 
-In this example, a JavaScript object `my_js_object` is created using the Object.fromEntries() method, representing a dictionary-like structure. The to_py() function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
+In this example, a JavaScript object `my_js_object` is created using the `Object.fromEntries()` method, representing a dictionary-like structure. The `to_py()` function is then employed to convert this JavaScript object into a Python dictionary, resulting in `my_py_dict`.
 
 The output will be:
 ```json
@@ -56,13 +60,13 @@ Both **to_js()** and **to_py()** functions offer a convenient means to exchange
 
 ## Why the Use of to_py() is Essential?
 
-When previewing results in a RunPy query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in Pyodide. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
+- When previewing results in a *RunPy* query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in **Pyodide**. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
 
-Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
+- Consequently, the **JSON** tab presents data in the format of JavaScript objects, denoted by **()** symbols, while the **Raw** tab displays the raw representation as **[{}, {}, ...],** showing Python dictionaries in their original form with **{}** symbols.
 
-Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
+- Both representations are correct, with the JSON tab showcasing converted data compatible with JavaScript, and the Raw tab displaying the original Python dictionaries. The choice depends on the user's use case and whether they need to work with the data in a **JavaScript context** or **Python context**.
 
-To maintain consistency between JSON and Raw representations, the **to_js()** function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
+- To maintain consistency between JSON and Raw representations, the `to_js()` function provided by Pyodide can explicitly convert Python dictionaries to JavaScript objects. This ensures alignment between representations and guarantees that the data is in the desired format.
 
 <div style={{textAlign: 'center'}}>
  <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/to_py/topy.gif" alt="Print data from multiple tabs" />