Wrap dataframe (#1571)

* add suport for table cell wrapping

* revert pkginfo change

* revert pkginfo change

* fixed tests

* formatting

* type hint

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
pngwn 2022-06-17 01:02:01 +01:00 committed by GitHub
parent 5e7cf62a47
commit 8710d3a079
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 60 additions and 2 deletions

View File

@ -43,6 +43,27 @@ with gr.Blocks() as demo:
gr.Dataframe(
interactive=True, headers=["One", "Two", "Three", "Four"], col_count=4
)
gr.DataFrame(
[
[
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
],
[
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
],
[
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
],
],
headers=["One", "Two", "Three"],
wrap=True,
)
if __name__ == "__main__":

View File

@ -428,4 +428,3 @@ journal={arXiv preprint arXiv:1906.02569},
year={2019}
}
```

View File

@ -2331,6 +2331,7 @@ class Dataframe(Changeable, IOComponent):
interactive: Optional[bool] = None,
visible: bool = True,
elem_id: Optional[str] = None,
wrap: bool = False,
**kwargs,
):
"""
@ -2348,8 +2349,10 @@ class Dataframe(Changeable, IOComponent):
label (Optional[str]): component name in interface.
show_label (bool): if True, will display label.
visible (bool): If False, component will be hidden.
wrap (Optional[bool]): if True text in table cells will wrap when appropriate, if False the table will scroll horiztonally. Defaults to False.
"""
self.wrap = wrap
self.row_count = self.__process_counts(row_count)
self.col_count = self.__process_counts(
col_count, len(headers) if headers else 3
@ -2396,6 +2399,7 @@ class Dataframe(Changeable, IOComponent):
"max_rows": self.max_rows,
"max_cols": self.max_cols,
"overflow_row_behaviour": self.overflow_row_behaviour,
"wrap": self.wrap,
**IOComponent.get_config(self),
}

View File

@ -1038,6 +1038,7 @@ class TestDataframe(unittest.TestCase):
"elem_id": None,
"visible": True,
"interactive": None,
"wrap": False,
},
)
dataframe_input = gr.Dataframe()
@ -1085,6 +1086,7 @@ class TestDataframe(unittest.TestCase):
["", "", ""],
],
"interactive": None,
"wrap": False,
},
)
with self.assertRaises(ValueError):

View File

@ -18,6 +18,7 @@
export let parent: string | null = null;
export let style: Styles = {};
export let label: string | null = null;
export let wrap: boolean;
$: {
if (value && !Array.isArray(value)) {
@ -58,5 +59,6 @@
on:change={handle_change}
editable={mode === "dynamic"}
{style}
{wrap}
/>
</div>

View File

@ -17,6 +17,7 @@
export let editable = true;
export let style: Styles = {};
export let wrap: boolean = false;
const dispatch = createEventDispatcher<{ change: typeof values }>();
@ -472,8 +473,9 @@
</p>
{/if}
<div
class="scroll-hide whitespace-nowrap overflow-hidden rounded-lg relative border transition-colors overflow-x-scroll {classes}"
class="scroll-hide overflow-hidden rounded-lg relative border transition-colors overflow-x-scroll {classes}"
class:border-green-400={dragging}
class:whitespace-nowrap={!wrap}
>
<Upload
flex={false}

View File

@ -8,6 +8,24 @@
];
let values = [[1, "Two", "Three"]];
const src_two = [
[
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
],
[
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
],
[
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.",
"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing."
]
];
</script>
<Table
@ -19,3 +37,13 @@
label={"Data"}
/>
<button class="gr-button" on:click={() => (values = src)}>Populate</button>
<Table
wrap={true}
values={src_two}
headers={["Num", "Two", "Three"]}
col_count={[3, "dynamic"]}
editable
row_count={[3, "dynamic"]}
label={"Data"}
/>