@gradio/dataframe 0.24.3 → 0.24.5

package/shared/Toolbar.svelte

@@ -18,7 +18,7 @@
 		show_copy_button?: boolean;
 		show_search?: "none" | "search" | "filter";
 		fullscreen?: boolean;
-		on_copy: () => Promise<void>;
+		on_copy: () => Promise<boolean>;
 		on_commit_filter: () => void;
 		current_search_query?: string | null;
 		onsearch?: (query: string | null) => void;
@@ -48,8 +48,7 @@
 	}
 
 	async function handle_copy(): Promise<void> {
-		await on_copy();
-		copy_feedback();
+		if (await on_copy()) copy_feedback();
 	}
 
 	$effect(() => {

package/shared/icons/SelectionButtons.svelte

@@ -27,6 +27,7 @@
 	class="selection-button selection-button-{position} {is_first_position
 		? `move-${direction}`
 		: ''}"
+	tabindex="-1"
 	onclick={(e: MouseEvent) => {
 		e.stopPropagation();
 		on_click && on_click();

package/shared/utils/selection_utils.ts

@@ -10,15 +10,20 @@ export function is_cell_in_selection(
 	return selected_cells.some(([r, c]) => r === row && c === col);
 }
 
+// row_above/row_below are the data indices of the rows the caller is rendering
+// on either side of `cell`, or null at an edge of the view. A search or a sort
+// makes them differ from row ± 1, so only the caller knows them.
 export function is_cell_selected(
 	cell: CellCoordinate,
-	selected_cells: CellCoordinate[]
+	selected_cells: CellCoordinate[],
+	row_above: number | null,
+	row_below: number | null
 ): string {
 	const [row, col] = cell;
 	if (!selected_cells.some(([r, c]) => r === row && c === col)) return "";
 
-	const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
-	const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+	const up = selected_cells.some(([r, c]) => r === row_above && c === col);
+	const down = selected_cells.some(([r, c]) => r === row_below && c === col);
 	const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
 	const right = selected_cells.some(([r, c]) => r === row && c === col + 1);
 

package/shared/utils/table_utils.ts

@@ -11,18 +11,17 @@ export function make_header_id(col: number): string {
 
 export async function copy_table_data(
 	data: TableData,
-	selected_cells: [number, number][] | null
+	selected_cells: [number, number][]
 ): Promise<void> {
 	if (!data || !data.length) return;
 
-	const cells_to_copy =
-		selected_cells ||
-		data.flatMap((row, r) => row.map((_, c) => [r, c] as [number, number]));
-
-	const csv = cells_to_copy.reduce(
+	const csv = selected_cells.reduce(
 		(acc: { [key: string]: { [key: string]: string } }, [row, col]) => {
 			acc[row] = acc[row] || {};
-			const value = String(data[row][col].value);
+			// only the headers are padded out to the column count on the way in, so
+			// a selection can name a cell a short row does not have
+			const cell = data[row]?.[col];
+			const value = cell ? String(cell.value) : "";
 			acc[row][col] =
 				value.includes(",") || value.includes('"') || value.includes("\n")
 					? `"${value.replace(/"/g, '""')}"`
@@ -35,7 +34,11 @@ export async function copy_table_data(
 	const rows = Object.keys(csv).sort((a, b) => +a - +b);
 	if (!rows.length) return;
 
-	const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
+	// every column any selected row contributes: taking them from the first row
+	// alone drops the rest of a selection that is not rectangular there
+	const cols = Array.from(
+		new Set(rows.flatMap((r) => Object.keys(csv[r])))
+	).sort((a, b) => +a - +b);
 	const text = rows
 		.map((r) => cols.map((c) => csv[r][c] || "").join(","))
 		.join("\n");

package/test/selection_utils.test.ts

@@ -70,11 +70,13 @@ describe("is_cell_in_selection", () => {
 
 describe("is_cell_selected", () => {
 	test("returns empty string when cell not selected", () => {
-		expect(is_cell_selected([0, 0], [[1, 1]])).toBe("");
+		expect(is_cell_selected([0, 0], [[1, 1]], null, null)).toBe("");
 	});
 
 	test("returns 'cell-selected' for isolated cell", () => {
-		expect(is_cell_selected([1, 1], [[1, 1]])).toBe("cell-selected");
+		expect(is_cell_selected([1, 1], [[1, 1]], null, null)).toBe(
+			"cell-selected"
+		);
 	});
 
 	test("adds 'no-top' when neighbor above is selected", () => {
@@ -83,7 +85,9 @@ describe("is_cell_selected", () => {
 			[
 				[0, 0],
 				[1, 0]
-			]
+			],
+			0,
+			null
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-top");
@@ -95,19 +99,46 @@ describe("is_cell_selected", () => {
 			[
 				[0, 0],
 				[1, 0]
-			]
+			],
+			null,
+			1
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-bottom");
 	});
 
+	test("merges rows that are adjacent in the view but not in the data", () => {
+		// what a search leaves behind: data rows 0, 2, 4 shown next to each other
+		const selection: CellCoordinate[] = [
+			[0, 0],
+			[2, 0],
+			[4, 0]
+		];
+		const result = is_cell_selected([2, 0], selection, 0, 4);
+		expect(result).toContain("no-top");
+		expect(result).toContain("no-bottom");
+	});
+
+	test("does not merge a selected row the view is not showing next to it", () => {
+		// row 1 is selected but the search has hidden it, so row 2's neighbours on
+		// screen are rows 0 and 4. Comparing row ± 1 instead would merge the top.
+		const selection: CellCoordinate[] = [
+			[1, 0],
+			[2, 0]
+		];
+		const result = is_cell_selected([2, 0], selection, 0, 4);
+		expect(result).toBe("cell-selected");
+	});
+
 	test("adds 'no-left' when neighbor left is selected", () => {
 		const result = is_cell_selected(
 			[0, 1],
 			[
 				[0, 0],
 				[0, 1]
-			]
+			],
+			null,
+			null
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-left");
@@ -119,7 +150,9 @@ describe("is_cell_selected", () => {
 			[
 				[0, 0],
 				[0, 1]
-			]
+			],
+			null,
+			null
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-right");
@@ -133,7 +166,7 @@ describe("is_cell_selected", () => {
 			[1, 0],
 			[1, 1]
 		];
-		const result = is_cell_selected([1, 1], selection);
+		const result = is_cell_selected([1, 1], selection, 0, null);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-top");
 		expect(result).toContain("no-left");