@gradio/dataframe 0.13.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @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
+
+- [#10461](https://github.com/gradio-app/gradio/pull/10461) [`ca7c47e`](https://github.com/gradio-app/gradio/commit/ca7c47e5e50a309cd637c4f928ab90af6355b01d) - Add copy button to dataframe toolbar.  Thanks @hannahblair!
+- [#10420](https://github.com/gradio-app/gradio/pull/10420) [`a69b8e8`](https://github.com/gradio-app/gradio/commit/a69b8e83ad7c89c627db2bdd5d25b0142731aaac) - Support column/row deletion in `gr.DataFrame`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.14.8
+- @gradio/button@0.4.4
+
 ## 0.13.1
 
 ### Features

package/Dataframe.stories.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	// @ts-nocheck
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Table from "./shared/Table.svelte";
 	import { within } from "@testing-library/dom";
@@ -10,6 +11,11 @@
 <Meta
 	title="Components/DataFrame"
 	component={Table}
+	parameters={{
+		test: {
+			dangerouslyIgnoreUnhandledErrors: true // ignore fullscreen permission error
+		}
+	}}
 	argTypes={{
 		editable: {
 			control: [true, false],
@@ -87,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
@@ -194,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");
@@ -220,3 +248,121 @@
 		show_fullscreen_button: true
 	}}
 />
+
+<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", "Writing"],
+		values: [
+			[800, 100, 400],
+			[200, 800, 700]
+		],
+		show_fullscreen_button: true,
+		show_copy_button: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const copy_button = canvas.getByRole("button", {
+			name: "Copy table data"
+		});
+		await userEvent.click(copy_button);
+
+		const fullscreen_button = canvas.getByRole("button", {
+			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,8 @@
 	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)];
 	$: cell_values = value.data ? [...value.data] : [];
@@ -105,5 +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,8 @@ 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];
 $:
@@ -88,5 +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,8 @@ declare const __propDef: {
         loading_status: LoadingStatus;
         interactive: boolean;
         show_fullscreen_button?: boolean | undefined;
+        max_chars?: number | undefined;
+        show_copy_button?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -135,4 +137,10 @@ 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/CellMenu.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import Arrow from "./Arrow.svelte";
+import CellMenuIcons from "./CellMenuIcons.svelte";
 export let x;
 export let y;
 export let on_add_row_above;
@@ -9,6 +9,10 @@ export let on_add_column_right;
 export let row;
 export let col_count;
 export let row_count;
+export let on_delete_row;
+export let on_delete_col;
+export let can_delete_rows;
+export let can_delete_cols;
 export let i18n;
 let menu_element;
 $:
@@ -42,23 +46,35 @@ function position_menu() {
 <div bind:this={menu_element} class="cell-menu">
 	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
-			<Arrow transform="rotate(-90 12 12)" />
+			<CellMenuIcons icon="add-row-above" />
 			{i18n("dataframe.add_row_above")}
 		</button>
 		<button on:click={() => on_add_row_below()}>
-			<Arrow transform="rotate(90 12 12)" />
+			<CellMenuIcons icon="add-row-below" />
 			{i18n("dataframe.add_row_below")}
 		</button>
+		{#if can_delete_rows}
+			<button on:click={on_delete_row} class="delete">
+				<CellMenuIcons icon="delete-row" />
+				{i18n("dataframe.delete_row")}
+			</button>
+		{/if}
 	{/if}
 	{#if can_add_columns}
 		<button on:click={() => on_add_column_left()}>
-			<Arrow transform="rotate(180 12 12)" />
+			<CellMenuIcons icon="add-column-left" />
 			{i18n("dataframe.add_column_left")}
 		</button>
 		<button on:click={() => on_add_column_right()}>
-			<Arrow transform="rotate(0 12 12)" />
+			<CellMenuIcons icon="add-column-right" />
 			{i18n("dataframe.add_column_right")}
 		</button>
+		{#if can_delete_cols}
+			<button on:click={on_delete_col} class="delete">
+				<CellMenuIcons icon="delete-column" />
+				{i18n("dataframe.delete_column")}
+			</button>
+		{/if}
 	{/if}
 </div>
 
@@ -102,8 +118,4 @@ function position_menu() {
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
-
-	.cell-menu button:hover :global(svg) {
-		fill: var(--color-accent);
-	}
 </style>

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

@@ -11,6 +11,10 @@ declare const __propDef: {
         row: number;
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
+        on_delete_row: () => void;
+        on_delete_col: () => void;
+        can_delete_rows: boolean;
+        can_delete_cols: boolean;
         i18n: I18nFormatter;
     };
     events: {

package/dist/shared/CellMenuIcons.svelte

@@ -0,0 +1,112 @@
+<script>export let icon;
+</script>
+
+{#if icon == "add-column-right"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="4"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H19M16 8L19 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-column-left"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="16"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H5M8 8L5 12L8 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-above"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="16"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V5M8 8L12 5L16 8"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-below"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="4"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V19M8 16L12 19L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-row"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="5"
+			y="10"
+			width="14"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M8 7L16 17M16 7L8 17"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-column"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="10"
+			y="5"
+			width="4"
+			height="14"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M7 8L17 16M17 8L7 16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        icon: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CellMenuIconsProps = typeof __propDef.props;
+export type CellMenuIconsEvents = typeof __propDef.events;
+export type CellMenuIconsSlots = typeof __propDef.slots;
+export default class CellMenuIcons extends SvelteComponent<CellMenuIconsProps, CellMenuIconsEvents, CellMenuIconsSlots> {
+}
+export {};

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>;