@gradio/dataframe 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/dataframe
 
+## 0.15.0
+
+### Features
+
+- [#10456](https://github.com/gradio-app/gradio/pull/10456) [`8e40c15`](https://github.com/gradio-app/gradio/commit/8e40c15669ed1244d6f2288e55c2223279bd37a4) - Implement multiple cell selection.  Thanks @hannahblair!
+- [#10463](https://github.com/gradio-app/gradio/pull/10463) [`ed7a091`](https://github.com/gradio-app/gradio/commit/ed7a0919ab6b31184dc4d686b722dbeb013e9ce9) - Expand and collapse dataframe cells.  Thanks @hannahblair!
+- [#10478](https://github.com/gradio-app/gradio/pull/10478) [`afb96c6`](https://github.com/gradio-app/gradio/commit/afb96c64451e5a282bfee89445d831d1c87f9746) - Improve dataframe's upload accessibility.  Thanks @hannahblair!
+- [#10491](https://github.com/gradio-app/gradio/pull/10491) [`ff5f976`](https://github.com/gradio-app/gradio/commit/ff5f976bbb685fdd4f7c1faeda79e094f55a9f56) - Allow multiline headers in gr.Dataframe.  Thanks @hannahblair!
+- [#10494](https://github.com/gradio-app/gradio/pull/10494) [`10932a2`](https://github.com/gradio-app/gradio/commit/10932a291ac7f591bb1d56e4e353b51f10ecc6e3) - Ensure dataframe is not editable when `interactive` is False.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/client@1.11.0
+- @gradio/upload@0.15.0
+- @gradio/button@0.4.5
+
 ## 0.14.0
 
 ### Features

package/Dataframe.stories.svelte

@@ -93,6 +93,26 @@
 		row_count: [3, "dynamic"],
 		editable: false
 	}}
+	play={async ({ canvasElement }) => {
+		// tests that the cell is not editable
+
+		const canvas = within(canvasElement);
+		const cells = canvas.getAllByRole("cell");
+		const initial_value = cells[0].textContent;
+
+		await userEvent.click(cells[0]);
+		await userEvent.keyboard("new value");
+
+		const final_value = cells[0].textContent;
+		if (initial_value !== final_value) {
+			throw new Error("Cell content changed when it should be non-editable");
+		}
+
+		const inputs = canvas.queryAllByRole("textbox");
+		if (inputs.length > 0) {
+			throw new Error("Input field appeared when table should be non-editable");
+		}
+	}}
 />
 
 <Story
@@ -200,9 +220,11 @@
 		const canvas = within(canvasElement);
 
 		const cell_400 = canvas.getAllByRole("cell")[5];
-		userEvent.click(cell_400);
+		await userEvent.click(cell_400);
 
-		const open_dialog_btn = within(cell_400).getByText("⋮");
+		const open_dialog_btn = await within(cell_400).findByRole("button", {
+			name: "⋮"
+		});
 		await userEvent.click(open_dialog_btn);
 
 		const add_row_btn = canvas.getByText("Add row above");
@@ -227,12 +249,52 @@
 	}}
 />
 
+<Story
+	name="Dataframe with multiple selection interactions"
+	args={{
+		values: [
+			[1, 2, 3, 4],
+			[5, 6, 7, 8],
+			[9, 10, 11, 12],
+			[13, 14, 15, 16]
+		],
+		col_count: [4, "dynamic"],
+		row_count: [4, "dynamic"],
+		headers: ["A", "B", "C", "D"],
+		editable: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const cells = canvas.getAllByRole("cell");
+		const user = userEvent.setup();
+
+		// cmd+click to select non-contiguous cells
+		await user.keyboard("[MetaLeft>]");
+		await user.click(cells[4]);
+		await user.click(cells[6]);
+		await user.click(cells[2]);
+		await user.keyboard("[/MetaLeft]");
+
+		// shift+click to select a range
+		await user.keyboard("[ShiftLeft>]");
+		await user.click(cells[7]);
+		await user.click(cells[6]);
+		await user.keyboard("[/ShiftLeft]");
+
+		// clear selected cells
+		await user.keyboard("{Delete}");
+
+		// verify cells were cleared by clicking one
+		await user.click(cells[2]);
+	}}
+/>
+
 <Story
 	name="Dataframe toolbar interactions"
 	args={{
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],
-		headers: ["Math", "Reading", "Writifdsfsng"],
+		headers: ["Math", "Reading", "Writing"],
 		values: [
 			[800, 100, 400],
 			[200, 800, 700]
@@ -244,15 +306,63 @@
 		const canvas = within(canvasElement);
 
 		const copy_button = canvas.getByRole("button", {
-			name: /copy table data/i
+			name: "Copy table data"
 		});
 		await userEvent.click(copy_button);
 
 		const fullscreen_button = canvas.getByRole("button", {
-			name: /enter fullscreen/i
+			name: "Enter fullscreen"
 		});
 		await userEvent.click(fullscreen_button);
 
 		await userEvent.click(fullscreen_button);
 	}}
 />
+
+<Story
+	name="Dataframe with truncated text"
+	args={{
+		values: [
+			[
+				"This is a very long text that should be truncated",
+				"Short text",
+				"Another very long text that needs truncation"
+			],
+			[
+				"Short",
+				"This text is also quite long and should be truncated as well",
+				"Medium length text here"
+			],
+			[
+				"Medium text",
+				"Brief",
+				"This is the longest text in the entire table and it should definitely be truncated"
+			]
+		],
+		headers: ["Column A", "Column B", "Column C"],
+		label: "Truncated Text Example",
+		max_chars: 20,
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"]
+	}}
+/>
+
+<Story
+	name="Dataframe with multiline headers"
+	args={{
+		values: [
+			[95, 92, 88],
+			[89, 90, 85],
+			[92, 88, 91]
+		],
+		headers: [
+			"Dataset A\nAccuracy",
+			"Dataset B\nPrecision",
+			"Dataset C\nRecall"
+		],
+		label: "Model Metrics",
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"],
+		editable: false
+	}}
+/>

package/Index.svelte

@@ -49,6 +49,7 @@
 	export let loading_status: LoadingStatus;
 	export let interactive: boolean;
 	export let show_fullscreen_button = false;
+	export let max_chars: number | undefined = undefined;
 	export let show_copy_button = false;
 
 	$: _headers = [...(value.headers || headers)];
@@ -106,6 +107,7 @@
 		stream_handler={(...args) => gradio.client.stream(...args)}
 		bind:value_is_output
 		{show_fullscreen_button}
+		{max_chars}
 		{show_copy_button}
 	/>
 </Block>

package/dist/Index.svelte

@@ -34,6 +34,7 @@ export let max_height = void 0;
 export let loading_status;
 export let interactive;
 export let show_fullscreen_button = false;
+export let max_chars = void 0;
 export let show_copy_button = false;
 $:
   _headers = [...value.headers || headers];
@@ -89,6 +90,7 @@ $:
 		stream_handler={(...args) => gradio.client.stream(...args)}
 		bind:value_is_output
 		{show_fullscreen_button}
+		{max_chars}
 		{show_copy_button}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -38,6 +38,7 @@ declare const __propDef: {
         loading_status: LoadingStatus;
         interactive: boolean;
         show_fullscreen_button?: boolean | undefined;
+        max_chars?: number | undefined;
         show_copy_button?: boolean | undefined;
     };
     events: {
@@ -136,6 +137,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_fullscreen_button(): boolean | undefined;
     /**accessor*/
     set show_fullscreen_button(_: boolean | undefined);
+    get max_chars(): number | undefined;
+    /**accessor*/
+    set max_chars(_: number | undefined);
     get show_copy_button(): boolean | undefined;
     /**accessor*/
     set show_copy_button(_: boolean | undefined);

package/dist/shared/EditableCell.svelte

@@ -11,10 +11,20 @@ export let clear_on_focus = false;
 export let line_breaks = true;
 export let editable = true;
 export let root;
+export let max_chars = null;
 const dispatch = createEventDispatcher();
+let is_expanded = false;
 export let el;
 $:
   _value = value;
+function truncate_text(text, max_length = null) {
+  const str = String(text);
+  if (!max_length || str.length <= max_length)
+    return str;
+  return str.slice(0, max_length) + "...";
+}
+$:
+  display_text = is_expanded ? value : truncate_text(display_value || value, max_chars);
 function use_focus(node) {
   if (clear_on_focus) {
     _value = "";
@@ -32,11 +42,20 @@ function handle_blur({
 }
 function handle_keydown(event) {
   if (event.key === "Enter") {
-    value = _value;
-    dispatch("blur");
+    if (edit) {
+      value = _value;
+      dispatch("blur");
+    } else if (!header) {
+      is_expanded = !is_expanded;
+    }
   }
   dispatch("keydown", event);
 }
+function handle_click() {
+  if (!edit && !header) {
+    is_expanded = !is_expanded;
+  }
+}
 </script>
 
 {#if edit}
@@ -56,27 +75,31 @@ function handle_keydown(event) {
 {/if}
 
 <span
-	on:dblclick
-	tabindex="-1"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	tabindex="0"
 	role="button"
 	class:edit
+	class:expanded={is_expanded}
+	class:multiline={header}
 	on:focus|preventDefault
 	style={styling}
 	class="table-cell-text"
+	data-editable={editable}
 	placeholder=" "
 >
 	{#if datatype === "html"}
-		{@html value}
+		{@html display_text}
 	{:else if datatype === "markdown"}
 		<MarkdownCode
-			message={value.toLocaleString()}
+			message={display_text.toLocaleString()}
 			{latex_delimiters}
 			{line_breaks}
 			chatbot={false}
 			{root}
 		/>
 	{:else}
-		{editable ? value : display_value || value}
+		{editable ? display_text : display_value || display_text}
 	{/if}
 </span>
 
@@ -97,6 +120,8 @@ function handle_keydown(event) {
 
 	span {
 		flex: 1 1 0%;
+		position: relative;
+		display: inline-block;
 		outline: none;
 		padding: var(--size-2);
 		-webkit-user-select: text;
@@ -104,11 +129,31 @@ function handle_keydown(event) {
 		-ms-user-select: text;
 		user-select: text;
 		cursor: text;
+		width: 100%;
+		height: 100%;
+	}
+
+	input:where(:not(.header), [data-editable="true"]) {
+		width: calc(100% - var(--size-10));
+	}
+
+	span.expanded {
+		height: auto;
+		min-height: 100%;
+		white-space: pre-wrap;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.multiline {
+		white-space: pre-line;
 	}
 
 	.header {
 		transform: translateX(0);
 		font-weight: var(--weight-bold);
+		white-space: normal;
+		word-break: break-word;
 	}
 
 	.edit {

package/dist/shared/EditableCell.svelte.d.ts

@@ -16,13 +16,13 @@ declare const __propDef: {
         line_breaks?: boolean | undefined;
         editable?: boolean | undefined;
         root: string;
+        max_chars?: (number | null) | undefined;
         el: HTMLInputElement | null;
     };
     events: {
         mousedown: MouseEvent;
         mouseup: MouseEvent;
         click: MouseEvent;
-        dblclick: MouseEvent;
         focus: FocusEvent;
         blur: CustomEvent<any>;
         keydown: CustomEvent<any>;