Repository: gradio-app/gradio

Issue:
Dataframe input does not refresh as intended
### Describe the bug

When using a dataframe as input, the Gradio app output is locked to the input received when run for the first time. Subsequent user updates to the dataframe is not reflected in the Gradio app output. In addition, when "Clear" is selected to clear the outputs, the Gradio app behaves as if an empty dataframe is passed. The app has to be relaunched to have new input processed correctly.

Reporting both instances in the same issue as I suspect they both have to do with how Gradio handles dataframe input under the hood.

### Reproduction

Both of these are reproducible using the `filter_records.ipynb` demo at https://colab.research.google.com/drive/1mSrwzeNRMQc0FBiUY9Yx_rwqyX1X-7Cf#scrollTo=RN-8fjhplcnX.  Code reproduced below for convenience:

```
import gradio as gr

def filter_records(records, gender):
    return records[records["gender"] == gender]

iface = gr.Interface(
    filter_records,
    [
        gr.inputs.Dataframe(
            headers=["name", "age", "gender"],
            datatype=["str", "number", "str"],
            row_count=5,
        ),
        gr.inputs.Dropdown(["M", "F", "O"]),
    ],
    "dataframe",
    description="Enter gender as 'M', 'F', or 'O' for other.",
)

iface.test_launch()

iface.launch()
```

Including reproduction steps in the screenshot section below.



### Screenshot

1. Launch the app, key in the following table, and run the app. The output will correctly filter to show only the first row.

| name | age | gender |
|--------|-----|----------|
| A        | 1    | M          |
| B        | 1    | F          |
| C        | 1    | O          |

![image](https://user-images.githubusercontent.com/12769364/161469486-93582fbd-90b3-4c99-945c-ba9fb88dad9e.png)


2. Change `gender` in rows 2 and 3 to "M", and submit the new input. All rows should be displayed as expected output, but the output did not change.

![image](https://user-images.githubusercontent.com/12769364/161469558-f13559f9-5055-4c11-92be-d75223851253.png)

3. Select "Clear" then "Submit". The output is now blank, as if no rows are given as input.

![image](https://user-images.githubusercontent.com/12769364/161469598-257b9a51-5700-4de1-b718-b342725538b1.png)


### Logs

```shell
No logs generated
```


### System Info

```shell
Gradio version: 2.9.1, running on Google Colab
OS: MS Windows
Browser: Edge
```


### Severity

blocker


Discussion:
Same problem, if i change the data and doesnt click clear button,the dataframe will not refresh. Not only change the data manually but also use `Examples` to input, but when i click `Clear` button then `Submit`, the output will refresh.
My app's input is image, but yours are dataframe, when i click the `Clear`button ,it seems doesnt work at all, think the problem is input dataframe part
Thanks for letting us know @tnwei and @Olvi73, we are working on fixing all of the issues with the `Dataframe` component.

cc @pngwn  

Resolving patch:
diff --git a/gradio/components.py b/gradio/components.py
--- a/gradio/components.py
+++ b/gradio/components.py
@@ -2033,23 +2033,21 @@ def __init__(
         self.col_width = col_width
         self.type = type
         self.output_type = "auto"
-        self.default_value = (
-            default_value
-            if default_value is not None
-            else [[None for _ in range(self.col_count)] for _ in range(self.row_count)]
-        )
-        sample_values = {
-            "str": "abc",
-            "number": 786,
-            "bool": True,
-            "date": "02/08/1993",
+        default_values = {
+            "str": "",
+            "number": 0,
+            "bool": False,
+            "date": "01/01/1970",
         }
         column_dtypes = (
             [datatype] * self.col_count if isinstance(datatype, str) else datatype
         )
         self.test_input = [
-            [sample_values[c] for c in column_dtypes] for _ in range(row_count)
+            [default_values[c] for c in column_dtypes] for _ in range(row_count)
         ]
+        self.default_value = (
+            default_value if default_value is not None else self.test_input
+        )
         self.max_rows = max_rows
         self.max_cols = max_cols
         self.overflow_row_behaviour = overflow_row_behaviour


Test patch:
diff --git a/test/test_components.py b/test/test_components.py
--- a/test/test_components.py
+++ b/test/test_components.py
@@ -832,9 +832,9 @@ def test_component_functions(self):
                 "col_count": 3,
                 "col_width": None,
                 "default_value": [
-                    [None, None, None],
-                    [None, None, None],
-                    [None, None, None],
+                    ["", "", ""],
+                    ["", "", ""],
+                    ["", "", ""],
                 ],
                 "name": "dataframe",
                 "label": "Dataframe Input",
@@ -882,9 +882,9 @@ def test_component_functions(self):
                 "col_count": 3,
                 "col_width": None,
                 "default_value": [
-                    [None, None, None],
-                    [None, None, None],
-                    [None, None, None],
+                    ["", "", ""],
+                    ["", "", ""],
+                    ["", "", ""],
                 ],
             },
         )
diff --git a/test/test_inputs.py b/test/test_inputs.py
--- a/test/test_inputs.py
+++ b/test/test_inputs.py
@@ -594,9 +594,9 @@ def test_as_component(self):
                 "col_count": 3,
                 "col_width": None,
                 "default_value": [
-                    [None, None, None],
-                    [None, None, None],
-                    [None, None, None],
+                    ["", "", ""],
+                    ["", "", ""],
+                    ["", "", ""],
                 ],
                 "name": "dataframe",
                 "label": "Dataframe Input",
diff --git a/test/test_outputs.py b/test/test_outputs.py
--- a/test/test_outputs.py
+++ b/test/test_outputs.py
@@ -369,9 +369,9 @@ def test_as_component(self):
                 "col_count": 3,
                 "col_width": None,
                 "default_value": [
-                    [None, None, None],
-                    [None, None, None],
-                    [None, None, None],
+                    ["", "", ""],
+                    ["", "", ""],
+                    ["", "", ""],
                 ],
                 "name": "dataframe",
             },
diff --git a/ui/packages/app/test/blocks-basic.spec.ts b/ui/packages/app/test/blocks-basic.spec.ts
--- a/ui/packages/app/test/blocks-basic.spec.ts
+++ b/ui/packages/app/test/blocks-basic.spec.ts
@@ -26,7 +26,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 }
 
 test("renders the correct elements", async ({ page }) => {
-	await mock_demo(page, "xray_blocks");
+	await mock_demo(page, "blocks_xray");
 	await page.goto("http://localhost:3000");
 
 	const description = await page.locator(".output-markdown");
@@ -40,7 +40,7 @@ test("renders the correct elements", async ({ page }) => {
 });
 
 test("can run an api request and display the data", async ({ page }) => {
-	await mock_demo(page, "xray_blocks");
+	await mock_demo(page, "blocks_xray");
 	await mock_api(page, [
 		[
 			{
@@ -58,9 +58,6 @@ test("can run an api request and display the data", async ({ page }) => {
 
 	await page.goto("http://localhost:3000");
 
-	// await page.locator('button:has-text("Covid")').click();
-	// await page.locator('button:has-text("Lung Cancer")').click();
-
 	await page.check("label:has-text('Covid')");
 	await page.check("label:has-text('Lung Cancer')");