@gradio/dataframe 0.16.5 → 0.17.1

package/shared/utils/keyboard_utils.ts

@@ -0,0 +1,238 @@
+import { dequal } from "dequal/lite";
+import { handle_delete_key } from "../selection_utils";
+import type { KeyboardContext } from "../context/keyboard_context";
+import { tick } from "svelte";
+import { copy_table_data } from "./table_utils";
+
+function handle_header_navigation(
+	event: KeyboardEvent,
+	ctx: KeyboardContext
+): boolean {
+	if (ctx.selected_header === false || ctx.header_edit !== false) return false;
+	switch (event.key) {
+		case "ArrowDown":
+			ctx.df_actions.set_selected_header(false);
+			ctx.df_actions.set_selected([0, ctx.selected_header]);
+			ctx.df_actions.set_selected_cells([[0, ctx.selected_header]]);
+			return true;
+		case "ArrowLeft":
+			ctx.df_actions.set_selected_header(
+				ctx.selected_header > 0 ? ctx.selected_header - 1 : ctx.selected_header
+			);
+			return true;
+		case "ArrowRight":
+			ctx.df_actions.set_selected_header(
+				ctx.selected_header < ctx.headers.length - 1
+					? ctx.selected_header + 1
+					: ctx.selected_header
+			);
+			return true;
+		case "Escape":
+			event.preventDefault();
+			ctx.df_actions.set_selected_header(false);
+			return true;
+		case "Enter":
+			event.preventDefault();
+			if (ctx.editable) {
+				ctx.df_actions.set_header_edit(ctx.selected_header);
+			}
+			return true;
+	}
+	return false;
+}
+
+function handle_delete_operation(
+	event: KeyboardEvent,
+	ctx: KeyboardContext
+): boolean {
+	if (!ctx.editable) return false;
+	if (event.key !== "Delete" && event.key !== "Backspace") return false;
+
+	if (ctx.editing) {
+		const [row, col] = ctx.editing;
+		const input_el = ctx.els[ctx.data[row][col].id].input;
+		if (input_el && input_el.selectionStart !== input_el.selectionEnd) {
+			return false;
+		}
+		if (
+			event.key === "Delete" &&
+			input_el?.selectionStart !== input_el?.value.length
+		) {
+			return false;
+		}
+		if (event.key === "Backspace" && input_el?.selectionStart !== 0) {
+			return false;
+		}
+	}
+
+	event.preventDefault();
+	if (ctx.selected_cells.length > 0) {
+		const new_data = handle_delete_key(ctx.data, ctx.selected_cells);
+		ctx.dispatch("change", {
+			data: new_data.map((row) => row.map((cell) => cell.value)),
+			headers: ctx.headers.map((h) => h.value),
+			metadata: null
+		});
+		ctx.dispatch("input");
+	}
+	return true;
+}
+
+function handle_arrow_keys(
+	event: KeyboardEvent,
+	ctx: KeyboardContext,
+	i: number,
+	j: number
+): boolean {
+	if (ctx.editing) return false;
+	event.preventDefault();
+
+	const next_coords = ctx.move_cursor(event, [i, j], ctx.data);
+	if (next_coords) {
+		if (event.shiftKey) {
+			ctx.df_actions.set_selected_cells(
+				ctx.get_range_selection(
+					ctx.selected_cells.length > 0 ? ctx.selected_cells[0] : [i, j],
+					next_coords
+				)
+			);
+			ctx.df_actions.set_editing(false);
+		} else {
+			ctx.df_actions.set_selected_cells([next_coords]);
+			ctx.df_actions.set_editing(false);
+		}
+		ctx.df_actions.set_selected(next_coords);
+	} else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
+		ctx.df_actions.set_selected_header(j);
+		ctx.df_actions.set_selected(false);
+		ctx.df_actions.set_selected_cells([]);
+		ctx.df_actions.set_editing(false);
+	}
+	return true;
+}
+
+async function handle_enter_key(
+	event: KeyboardEvent,
+	ctx: KeyboardContext,
+	i: number,
+	j: number
+): Promise<boolean> {
+	event.preventDefault();
+	if (!ctx.editable) return false;
+
+	if (event.shiftKey) {
+		await ctx.add_row(i);
+		await tick();
+		ctx.df_actions.set_selected([i + 1, j]);
+	} else {
+		if (dequal(ctx.editing, [i, j])) {
+			const cell_id = ctx.data[i][j].id;
+			const input_el = ctx.els[cell_id].input;
+			if (input_el) {
+				const old_value = ctx.data[i][j].value;
+				ctx.data[i][j].value = input_el.value;
+				if (old_value !== input_el.value) {
+					ctx.dispatch("input");
+				}
+			}
+			ctx.df_actions.set_editing(false);
+			await tick();
+			ctx.df_actions.set_selected([i, j]);
+		} else {
+			ctx.df_actions.set_editing([i, j]);
+		}
+	}
+	return true;
+}
+
+function handle_tab_key(
+	event: KeyboardEvent,
+	ctx: KeyboardContext,
+	i: number,
+	j: number
+): boolean {
+	event.preventDefault();
+	ctx.df_actions.set_editing(false);
+	const next_cell = ctx.get_next_cell_coordinates(
+		[i, j],
+		ctx.data,
+		event.shiftKey
+	);
+	if (next_cell) {
+		ctx.df_actions.set_selected_cells([next_cell]);
+		ctx.df_actions.set_selected(next_cell);
+		if (ctx.editable) {
+			ctx.df_actions.set_editing(next_cell);
+		}
+	}
+	return true;
+}
+
+function handle_default_key(
+	event: KeyboardEvent,
+	ctx: KeyboardContext,
+	i: number,
+	j: number
+): boolean {
+	if (!ctx.editable) return false;
+	if (
+		(!ctx.editing || (ctx.editing && dequal(ctx.editing, [i, j]))) &&
+		event.key.length === 1
+	) {
+		ctx.df_actions.set_editing([i, j]);
+		return true;
+	}
+	return false;
+}
+
+async function handle_cell_navigation(
+	event: KeyboardEvent,
+	ctx: KeyboardContext
+): Promise<boolean> {
+	if (!ctx.selected) return false;
+	if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
+		event.preventDefault();
+		if (ctx.selected_cells.length > 0) {
+			await copy_table_data(ctx.data, ctx.selected_cells);
+		}
+		ctx.set_copy_flash(true);
+
+		return true;
+	}
+
+	const [i, j] = ctx.selected;
+
+	switch (event.key) {
+		case "ArrowRight":
+		case "ArrowLeft":
+		case "ArrowDown":
+		case "ArrowUp":
+			return handle_arrow_keys(event, ctx, i, j);
+		case "Escape":
+			if (!ctx.editable) return false;
+			event.preventDefault();
+			ctx.df_actions.set_editing(false);
+			tick().then(() => {
+				if (ctx.parent_element) {
+					ctx.parent_element.focus();
+				}
+			});
+
+			return true;
+		case "Enter":
+			return await handle_enter_key(event, ctx, i, j);
+		case "Tab":
+			return handle_tab_key(event, ctx, i, j);
+		default:
+			return handle_default_key(event, ctx, i, j);
+	}
+}
+
+export async function handle_keydown(
+	event: KeyboardEvent,
+	context: KeyboardContext
+): Promise<void> {
+	if (handle_header_navigation(event, context)) return;
+	if (handle_delete_operation(event, context)) return;
+	await handle_cell_navigation(event, context);
+}

package/shared/utils/sort_utils.test.ts

@@ -1,24 +1,89 @@
 import { describe, test, expect } from "vitest";
-import { get_sort_status, sort_data } from "./sort_utils";
+import { get_sort_status, sort_data, SortDirection } from "./sort_utils";
 
 describe("sort_utils", () => {
 	describe("get_sort_status", () => {
 		const headers = ["A", "B", "C"];
 
 		test("returns none when no sort is active", () => {
-			expect(get_sort_status("A", undefined, undefined, headers)).toBe("none");
+			expect(get_sort_status("A", [], headers)).toBe("none");
 		});
 
 		test("returns ascending when column is sorted ascending", () => {
-			expect(get_sort_status("A", 0, "asc", headers)).toBe("ascending");
+			expect(
+				get_sort_status(
+					"A",
+					[{ col: 0, direction: "asc" as SortDirection }],
+					headers
+				)
+			).toBe("asc");
 		});
 
 		test("returns descending when column is sorted descending", () => {
-			expect(get_sort_status("B", 1, "des", headers)).toBe("descending");
+			expect(
+				get_sort_status(
+					"B",
+					[{ col: 1, direction: "desc" as SortDirection }],
+					headers
+				)
+			).toBe("desc");
 		});
 
 		test("returns none for non-matching column", () => {
-			expect(get_sort_status("A", 1, "asc", headers)).toBe("none");
+			expect(
+				get_sort_status(
+					"A",
+					[{ col: 1, direction: "asc" as SortDirection }],
+					headers
+				)
+			).toBe("none");
+		});
+
+		test("handles multiple sort columns", () => {
+			const sort_columns = [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "desc" as SortDirection }
+			];
+			expect(get_sort_status("A", sort_columns, headers)).toBe("asc");
+			expect(get_sort_status("B", sort_columns, headers)).toBe("desc");
+			expect(get_sort_status("C", sort_columns, headers)).toBe("none");
+		});
+
+		test("handles invalid column indices", () => {
+			expect(
+				get_sort_status(
+					"A",
+					[{ col: -1, direction: "asc" as SortDirection }],
+					headers
+				)
+			).toBe("none");
+
+			expect(
+				get_sort_status(
+					"A",
+					[{ col: 999, direction: "asc" as SortDirection }],
+					headers
+				)
+			).toBe("none");
+		});
+
+		test("handles empty headers", () => {
+			expect(
+				get_sort_status(
+					"A",
+					[{ col: 0, direction: "asc" as SortDirection }],
+					[]
+				)
+			).toBe("none");
+		});
+
+		test("prioritizes first matching column in sort_columns", () => {
+			const sort_columns = [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 0, direction: "desc" as SortDirection }
+			];
+
+			expect(get_sort_status("A", sort_columns, headers)).toBe("asc");
 		});
 	});
 
@@ -39,33 +104,216 @@ describe("sort_utils", () => {
 		];
 
 		test("sorts strings ascending", () => {
-			const indices = sort_data(data, 0, "asc");
+			const indices = sort_data(data, [
+				{ col: 0, direction: "asc" as SortDirection }
+			]);
 			expect(indices).toEqual([1, 0, 2]); // A, B, C
 		});
 
 		test("sorts numbers ascending", () => {
-			const indices = sort_data(data, 1, "asc");
-			expect(indices).toEqual([1, 0, 2]); // 1, 2, 3
+			const indices = sort_data(data, [
+				{ col: 1, direction: "asc" as SortDirection }
+			]);
+			expect(indices).toEqual([1, 0, 2]);
 		});
 
 		test("sorts strings descending", () => {
-			const indices = sort_data(data, 0, "des");
-			expect(indices).toEqual([2, 0, 1]); // C, B, A
+			const indices = sort_data(data, [
+				{ col: 0, direction: "desc" as SortDirection }
+			]);
+			expect(indices).toEqual([2, 0, 1]);
 		});
 
-		test("returns original order when sort params are invalid", () => {
-			const indices = sort_data(data, undefined, undefined);
+		test("returns original order when sort params are empty", () => {
+			const indices = sort_data(data, []);
 			expect(indices).toEqual([0, 1, 2]);
 		});
 
 		test("handles empty data", () => {
-			const indices = sort_data([], 0, "asc");
+			const indices = sort_data(
+				[],
+				[{ col: 0, direction: "asc" as SortDirection }]
+			);
 			expect(indices).toEqual([]);
 		});
 
 		test("handles invalid column index", () => {
-			const indices = sort_data(data, 999, "asc");
+			const indices = sort_data(data, [
+				{ col: 999, direction: "asc" as SortDirection }
+			]);
+			expect(indices).toEqual([0, 1, 2]);
+		});
+
+		test("sorts by multiple columns", () => {
+			const test_data = [
+				[
+					{ id: "1", value: "A" },
+					{ id: "2", value: 2 }
+				],
+				[
+					{ id: "3", value: "A" },
+					{ id: "4", value: 1 }
+				],
+				[
+					{ id: "5", value: "B" },
+					{ id: "6", value: 3 }
+				]
+			];
+
+			const indices = sort_data(test_data, [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "asc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([1, 0, 2]);
+		});
+
+		test("respects sort direction for each column", () => {
+			const test_data = [
+				[
+					{ id: "1", value: "A" },
+					{ id: "2", value: 2 }
+				],
+				[
+					{ id: "3", value: "A" },
+					{ id: "4", value: 1 }
+				],
+				[
+					{ id: "5", value: "B" },
+					{ id: "6", value: 3 }
+				]
+			];
+
+			const indices = sort_data(test_data, [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "desc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([0, 1, 2]);
+		});
+
+		test("handles mixed data types in sort columns", () => {
+			const mixed_data = [
+				[
+					{ id: "1", value: "A" },
+					{ id: "2", value: 2 }
+				],
+				[
+					{ id: "3", value: "A" },
+					{ id: "4", value: 1 }
+				],
+				[
+					{ id: "5", value: "B" },
+					{ id: "6", value: 2 }
+				]
+			];
+
+			const indices = sort_data(mixed_data, [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "asc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([1, 0, 2]);
+		});
+
+		test("handles more than two sort columns", () => {
+			const complex_data = [
+				[
+					{ id: "1", value: "A" },
+					{ id: "2", value: 1 },
+					{ id: "3", value: "X" }
+				],
+				[
+					{ id: "4", value: "A" },
+					{ id: "5", value: 1 },
+					{ id: "6", value: "Y" }
+				],
+				[
+					{ id: "7", value: "B" },
+					{ id: "8", value: 2 },
+					{ id: "9", value: "Z" }
+				]
+			];
+
+			const indices = sort_data(complex_data, [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "asc" as SortDirection },
+				{ col: 2, direction: "asc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([0, 1, 2]);
+		});
+
+		test("ignores invalid sort columns", () => {
+			const indices = sort_data(data, [
+				{ col: -1, direction: "asc" as SortDirection },
+				{ col: 0, direction: "asc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([1, 0, 2]);
+		});
+
+		test("maintains original order when all values are equal", () => {
+			const equal_data = [
+				[
+					{ id: "1", value: "A" },
+					{ id: "2", value: 1 }
+				],
+				[
+					{ id: "3", value: "A" },
+					{ id: "4", value: 1 }
+				],
+				[
+					{ id: "5", value: "A" },
+					{ id: "6", value: 1 }
+				]
+			];
+
+			const indices = sort_data(equal_data, [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "asc" as SortDirection }
+			]);
+
 			expect(indices).toEqual([0, 1, 2]);
 		});
+
+		test("handles undefined values in data rows", () => {
+			const data_with_undefined = [
+				[
+					{ id: "1", value: "A" },
+					{ id: "2", value: "" }
+				],
+				[
+					{ id: "3", value: "B" },
+					{ id: "4", value: 2 }
+				]
+			];
+
+			const indices = sort_data(data_with_undefined, [
+				{ col: 0, direction: "asc" as SortDirection },
+				{ col: 1, direction: "asc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([0, 1]);
+		});
+
+		test("handles missing values in data", () => {
+			const data_with_missing = [
+				[
+					{ id: "1", value: "" },
+					{ id: "2", value: 1 }
+				],
+				[
+					{ id: "3", value: "A" },
+					{ id: "4", value: 2 }
+				]
+			];
+
+			const indices = sort_data(data_with_missing, [
+				{ col: 0, direction: "asc" as SortDirection }
+			]);
+
+			expect(indices).toEqual([0, 1]);
+		});
 	});
 });

package/shared/utils/sort_utils.ts

@@ -1,55 +1,91 @@
 import type { Headers } from "../types";
+import { sort_table_data } from "./table_utils";
 
-export type SortDirection = "asc" | "des";
+export type SortDirection = "asc" | "desc";
 
 export function get_sort_status(
 	name: string,
-	sort_by: number | undefined,
-	direction: SortDirection | undefined,
+	sort_columns: { col: number; direction: SortDirection }[],
 	headers: Headers
-): "none" | "ascending" | "descending" {
-	if (typeof sort_by !== "number") return "none";
-	if (sort_by < 0 || sort_by >= headers.length) return "none";
-	if (headers[sort_by] === name) {
-		if (direction === "asc") return "ascending";
-		if (direction === "des") return "descending";
-	}
-	return "none";
+): "none" | "asc" | "desc" {
+	if (!sort_columns.length) return "none";
+
+	const sort_item = sort_columns.find((item) => {
+		const col = item.col;
+		if (col < 0 || col >= headers.length) return false;
+		return headers[col] === name;
+	});
+
+	if (!sort_item) return "none";
+	return sort_item.direction;
 }
 
 export function sort_data(
 	data: { id: string; value: string | number }[][],
-	sort_by: number | undefined,
-	sort_direction: SortDirection | undefined
+	sort_columns: { col: number; direction: SortDirection }[]
 ): number[] {
 	if (!data || !data.length || !data[0]) {
 		return [];
 	}
 
-	if (
-		typeof sort_by === "number" &&
-		sort_direction &&
-		sort_by >= 0 &&
-		sort_by < data[0].length
-	) {
+	if (sort_columns.length > 0) {
 		const row_indices = [...Array(data.length)].map((_, i) => i);
 		row_indices.sort((row_a_idx, row_b_idx) => {
 			const row_a = data[row_a_idx];
 			const row_b = data[row_b_idx];
-			if (
-				!row_a ||
-				!row_b ||
-				sort_by >= row_a.length ||
-				sort_by >= row_b.length
-			)
-				return 0;
-
-			const val_a = row_a[sort_by].value;
-			const val_b = row_b[sort_by].value;
-			const comparison = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
-			return sort_direction === "asc" ? comparison : -comparison;
+
+			for (const { col: sort_by, direction } of sort_columns) {
+				if (
+					!row_a ||
+					!row_b ||
+					sort_by < 0 ||
+					sort_by >= row_a.length ||
+					sort_by >= row_b.length ||
+					!row_a[sort_by] ||
+					!row_b[sort_by]
+				) {
+					continue;
+				}
+
+				const val_a = row_a[sort_by].value;
+				const val_b = row_b[sort_by].value;
+				const comparison = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
+
+				if (comparison !== 0) {
+					return direction === "asc" ? comparison : -comparison;
+				}
+			}
+
+			return 0;
 		});
 		return row_indices;
 	}
 	return [...Array(data.length)].map((_, i) => i);
 }
+
+export function sort_data_and_preserve_selection(
+	data: { id: string; value: string | number }[][],
+	display_value: string[][] | null,
+	styling: string[][] | null,
+	sort_columns: { col: number; direction: SortDirection }[],
+	selected: [number, number] | false,
+	get_current_indices: (
+		id: string,
+		data: { id: string; value: string | number }[][]
+	) => [number, number]
+): { data: typeof data; selected: [number, number] | false } {
+	let id = null;
+	if (selected && selected[0] in data && selected[1] in data[selected[0]]) {
+		id = data[selected[0]][selected[1]].id;
+	}
+
+	sort_table_data(data, display_value, styling, sort_columns);
+
+	let new_selected = selected;
+	if (id) {
+		const [i, j] = get_current_indices(id, data);
+		new_selected = [i, j];
+	}
+
+	return { data, selected: new_selected };
+}