@gradio/dataframe 0.22.0 → 0.23.0

package/shared/utils/filter.ts

@@ -0,0 +1,66 @@
+/**
+ * Custom filter function for TanStack Table that handles Gradio's
+ * { dtype, filter, value } column filter format.
+ */
+export function gradio_filter_fn(
+	row: any,
+	columnId: string,
+	filterValue: any
+): boolean {
+	const { dtype, filter, value: fval } = filterValue;
+	const cell_value = String(row.getValue(columnId) ?? "");
+	const compare_val = fval ?? "";
+
+	if (dtype === "number") {
+		const num = parseFloat(cell_value);
+		const target = parseFloat(compare_val);
+		if (isNaN(num) || isNaN(target)) {
+			if (filter === "Is empty") return cell_value.trim() === "";
+			if (filter === "Is not empty") return cell_value.trim() !== "";
+			return true;
+		}
+		switch (filter) {
+			case "=":
+				return num === target;
+			case "≠":
+				return num !== target;
+			case ">":
+				return num > target;
+			case "<":
+				return num < target;
+			case "≥":
+				return num >= target;
+			case "≤":
+				return num <= target;
+			case "Is empty":
+				return cell_value.trim() === "";
+			case "Is not empty":
+				return cell_value.trim() !== "";
+			default:
+				return true;
+		}
+	}
+
+	const lower = cell_value.toLowerCase();
+	const target_lower = compare_val.toLowerCase();
+	switch (filter) {
+		case "Contains":
+			return lower.includes(target_lower);
+		case "Does not contain":
+			return !lower.includes(target_lower);
+		case "Starts with":
+			return lower.startsWith(target_lower);
+		case "Ends with":
+			return lower.endsWith(target_lower);
+		case "Is":
+			return lower === target_lower;
+		case "Is not":
+			return lower !== target_lower;
+		case "Is empty":
+			return cell_value.trim() === "";
+		case "Is not empty":
+			return cell_value.trim() !== "";
+		default:
+			return true;
+	}
+}

package/shared/utils/selection_utils.ts

@@ -37,7 +37,7 @@ export function get_range_selection(
 	const max_col = Math.max(start_col, end_col);
 
 	const cells: CellCoordinate[] = [];
-	// Add the start cell as the "anchor" cell so that when
+	// add the start cell as the "anchor" cell so that when
 	// we press shift+arrow keys, the selection will always
 	// include the anchor cell.
 	cells.push(start);

package/shared/utils/table_utils.ts

@@ -1,14 +1,4 @@
-import type {
-	CellValue,
-	Headers,
-	HeadersWithIDs,
-	TableCell,
-	TableData
-} from "../types";
-import { sort_data } from "./sort_utils";
-import { filter_data } from "./filter_utils";
-import type { SortDirection } from "./sort_utils";
-import type { FilterDatatype } from "./filter_utils";
+import type { CellValue, Headers, HeadersWithIDs, TableData } from "../types";
 import { dsvFormat } from "d3-dsv";
 
 export function make_cell_id(row: number, col: number): string {
@@ -19,94 +9,6 @@ export function make_header_id(col: number): string {
 	return `header-${col}`;
 }
 
-export function get_max(data: TableData): TableCell[] {
-	if (!data || !data.length) return [];
-	let max = data[0].slice();
-	for (let i = 0; i < data.length; i++) {
-		for (let j = 0; j < data[i].length; j++) {
-			if (`${max[j].value}`.length < `${data[i][j].value}`.length) {
-				max[j] = data[i][j];
-			}
-		}
-	}
-	return max;
-}
-
-export function sort_table_data(
-	data: TableData,
-	display_value: string[][] | null,
-	styling: string[][] | null,
-	sort_columns: { col: number; direction: SortDirection }[]
-): void {
-	if (!sort_columns.length) return;
-	if (!data || !data.length) return;
-
-	const indices = sort_data(data, sort_columns);
-
-	const new_data = indices.map((i: number) => data[i]);
-	data.splice(0, data.length, ...new_data);
-
-	if (display_value) {
-		const new_display = indices.map((i: number) => display_value[i]);
-		display_value.splice(0, display_value.length, ...new_display);
-	}
-
-	if (styling) {
-		const new_styling = indices.map((i: number) => styling[i]);
-		styling.splice(0, styling.length, ...new_styling);
-	}
-}
-
-export function filter_table_data(
-	data: TableData,
-	display_value: string[][] | null,
-	styling: string[][] | null,
-	filter_columns: {
-		col: number;
-		datatype: FilterDatatype;
-		filter: string;
-		value: string;
-	}[],
-	original_data?: TableData,
-	original_display_value?: string[][] | null,
-	original_styling?: string[][] | null
-): void {
-	const base_data = original_data ?? data;
-	const base_display_value = original_display_value ?? display_value;
-	const base_styling = original_styling ?? styling;
-
-	if (!filter_columns.length) {
-		data.splice(0, data.length, ...base_data.map((row) => [...row]));
-		if (display_value && base_display_value) {
-			display_value.splice(
-				0,
-				display_value.length,
-				...base_display_value.map((row) => [...row])
-			);
-		}
-		if (styling && base_styling) {
-			styling.splice(0, styling.length, ...base_styling.map((row) => [...row]));
-		}
-		return;
-	}
-	if (!data || !data.length) return;
-
-	const indices = filter_data(base_data, filter_columns);
-
-	const new_data = indices.map((i: number) => base_data[i]);
-	data.splice(0, data.length, ...new_data);
-
-	if (display_value && base_display_value) {
-		const new_display = indices.map((i: number) => base_display_value[i]);
-		display_value.splice(0, display_value.length, ...new_display);
-	}
-
-	if (styling && base_styling) {
-		const new_styling = indices.map((i: number) => base_styling[i]);
-		styling.splice(0, styling.length, ...new_styling);
-	}
-}
-
 export async function copy_table_data(
 	data: TableData,
 	selected_cells: [number, number][] | null
@@ -145,7 +47,6 @@ export async function copy_table_data(
 	}
 }
 
-// File Import/Export
 export function guess_delimiter(
 	text: string,
 	possibleDelimiters: string[]

package/standalone/Index.svelte

@@ -5,7 +5,52 @@
 	import type { I18nFormatter } from "@gradio/utils";
 	import { default_i18n } from "./default_i18n";
 
-	export let i18n: I18nFormatter | undefined = undefined;
+	let {
+		i18n = undefined,
+		value = $bindable({
+			data: [["", "", ""]],
+			headers: ["1", "2", "3"],
+			metadata: null
+		}),
+		datatype = "str",
+		interactive = true,
+		show_row_numbers = false,
+		max_height = 500,
+		show_search = "none",
+		wrap = false,
+		line_breaks = true,
+		column_widths = [],
+		max_chars = undefined,
+		pinned_columns = 0,
+		static_columns = [],
+		fullscreen = $bindable(false),
+		label = null,
+		show_label = true,
+		latex_delimiters = [],
+		col_count = undefined,
+		row_count = undefined
+	}: {
+		i18n?: I18nFormatter | undefined;
+		value?: DataframeValue;
+		datatype?: Datatype | Datatype[];
+		interactive?: boolean;
+		show_row_numbers?: boolean;
+		max_height?: number;
+		show_search?: "none" | "search" | "filter";
+		wrap?: boolean;
+		line_breaks?: boolean;
+		column_widths?: string[];
+		max_chars?: number | undefined;
+		pinned_columns?: number;
+		static_columns?: (string | number)[];
+		fullscreen?: boolean;
+		label?: string | null;
+		show_label?: boolean;
+		latex_delimiters?: any[];
+		col_count?: [number, "fixed" | "dynamic"] | undefined;
+		row_count?: [number, "fixed" | "dynamic"] | undefined;
+	} = $props();
+
 	const i18n_fn = (key: string | null | undefined): string => {
 		if (!key) return "";
 		if (typeof i18n === "function") return (i18n as any)(key);
@@ -14,31 +59,7 @@
 		return default_i18n[key] ?? key;
 	};
 
-	export let value: DataframeValue = {
-		data: [["", "", ""]],
-		headers: ["1", "2", "3"],
-		metadata: null
-	};
-	export let datatype: Datatype | Datatype[] = "str";
-	export let interactive = true;
-	export let show_row_numbers = false;
-	export let max_height = 500;
-	export let show_search: "none" | "search" | "filter" = "none";
-	export let wrap = false;
-	export let line_breaks = true;
-	export let column_widths: string[] = [];
-	export let max_chars: number | undefined = undefined;
-	export let pinned_columns = 0;
-	export let static_columns: (string | number)[] = [];
-	export let fullscreen = false;
-	export let label: string | null = null;
-	export let show_label = true;
-	export let latex_delimiters: any[] = [];
-	export let col_count: [number, "fixed" | "dynamic"] | undefined = undefined;
-	export let row_count: [number, "fixed" | "dynamic"] | undefined = undefined;
-
-	// mirrors default row count and column count logic in dataframe.py
-	$: resolved_row_count = (() => {
+	let resolved_row_count = $derived.by(() => {
 		if (
 			row_count &&
 			Array.isArray(row_count) &&
@@ -49,8 +70,9 @@
 			return row_count as [number, "fixed" | "dynamic"];
 		}
 		return [1, "dynamic"] as [number, "fixed" | "dynamic"];
-	})();
-	$: resolved_col_count = (() => {
+	});
+
+	let resolved_col_count_base = $derived.by(() => {
 		if (
 			col_count &&
 			Array.isArray(col_count) &&
@@ -65,14 +87,21 @@
 				? value.headers.length
 				: 3;
 		return [headerLength, "dynamic"] as [number, "fixed" | "dynamic"];
-	})();
-	$: if (
-		static_columns &&
-		static_columns.length > 0 &&
-		resolved_col_count[1] !== "fixed"
-	) {
-		resolved_col_count = [resolved_col_count[0], "fixed"];
-	}
+	});
+
+	let resolved_col_count = $derived.by(() => {
+		if (
+			static_columns &&
+			static_columns.length > 0 &&
+			resolved_col_count_base[1] !== "fixed"
+		) {
+			return [resolved_col_count_base[0], "fixed"] as [
+				number,
+				"fixed" | "dynamic"
+			];
+		}
+		return resolved_col_count_base;
+	});
 
 	let root = "";
 
@@ -91,8 +120,8 @@
 	<Table
 		values={value.data}
 		headers={value.headers}
-		display_value={value?.metadata?.display_value}
-		styling={value?.metadata?.styling}
+		display_value={value?.metadata?.display_value ?? null}
+		styling={value?.metadata?.styling ?? null}
 		{datatype}
 		editable={interactive}
 		{show_row_numbers}
@@ -113,15 +142,11 @@
 		row_count={resolved_row_count}
 		{root}
 		i18n={i18n_fn}
-		on:change={(e) => {
-			value.data = e.detail.data;
-			value.headers = e.detail.headers;
+		onchange={(detail) => {
+			value.data = detail.data;
+			value.headers = detail.headers;
 		}}
-		on:blur
-		on:keydown
-		on:input
-		on:select
-		on:fullscreen={(e) => (fullscreen = e.detail)}
+		onfullscreen={() => (fullscreen = !fullscreen)}
 		upload={async () => null}
 		stream_handler={() => new EventSource("about:blank")}
 	/>

package/test/filter.test.ts

@@ -0,0 +1,350 @@
+import { describe, test, expect } from "vitest";
+import { gradio_filter_fn } from "../shared/utils/filter";
+
+const make_row = (value: any) => ({
+	getValue: (_col: string) => value
+});
+
+describe("gradio_filter_fn", () => {
+	describe("number filters", () => {
+		test("= matches exact number", () => {
+			expect(
+				gradio_filter_fn(make_row(42), "col_0", {
+					dtype: "number",
+					filter: "=",
+					value: "42"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(42), "col_0", {
+					dtype: "number",
+					filter: "=",
+					value: "43"
+				})
+			).toBe(false);
+		});
+
+		test("≠ excludes exact number", () => {
+			expect(
+				gradio_filter_fn(make_row(42), "col_0", {
+					dtype: "number",
+					filter: "≠",
+					value: "42"
+				})
+			).toBe(false);
+			expect(
+				gradio_filter_fn(make_row(42), "col_0", {
+					dtype: "number",
+					filter: "≠",
+					value: "43"
+				})
+			).toBe(true);
+		});
+
+		test("> greater than", () => {
+			expect(
+				gradio_filter_fn(make_row(10), "col_0", {
+					dtype: "number",
+					filter: ">",
+					value: "5"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(5), "col_0", {
+					dtype: "number",
+					filter: ">",
+					value: "5"
+				})
+			).toBe(false);
+		});
+
+		test("< less than", () => {
+			expect(
+				gradio_filter_fn(make_row(3), "col_0", {
+					dtype: "number",
+					filter: "<",
+					value: "5"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(5), "col_0", {
+					dtype: "number",
+					filter: "<",
+					value: "5"
+				})
+			).toBe(false);
+		});
+
+		test("≥ greater than or equal", () => {
+			expect(
+				gradio_filter_fn(make_row(5), "col_0", {
+					dtype: "number",
+					filter: "≥",
+					value: "5"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(4), "col_0", {
+					dtype: "number",
+					filter: "≥",
+					value: "5"
+				})
+			).toBe(false);
+		});
+
+		test("≤ less than or equal", () => {
+			expect(
+				gradio_filter_fn(make_row(5), "col_0", {
+					dtype: "number",
+					filter: "≤",
+					value: "5"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(6), "col_0", {
+					dtype: "number",
+					filter: "≤",
+					value: "5"
+				})
+			).toBe(false);
+		});
+
+		test("Is empty on empty string", () => {
+			expect(
+				gradio_filter_fn(make_row(""), "col_0", {
+					dtype: "number",
+					filter: "Is empty",
+					value: ""
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("42"), "col_0", {
+					dtype: "number",
+					filter: "Is empty",
+					value: ""
+				})
+			).toBe(false);
+		});
+
+		test("Is not empty on non-empty string", () => {
+			expect(
+				gradio_filter_fn(make_row("42"), "col_0", {
+					dtype: "number",
+					filter: "Is not empty",
+					value: ""
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(""), "col_0", {
+					dtype: "number",
+					filter: "Is not empty",
+					value: ""
+				})
+			).toBe(false);
+		});
+
+		test("NaN target falls through to true", () => {
+			expect(
+				gradio_filter_fn(make_row(42), "col_0", {
+					dtype: "number",
+					filter: "=",
+					value: "abc"
+				})
+			).toBe(true);
+		});
+
+		test("NaN cell value falls through to true", () => {
+			expect(
+				gradio_filter_fn(make_row("abc"), "col_0", {
+					dtype: "number",
+					filter: "=",
+					value: "42"
+				})
+			).toBe(true);
+		});
+	});
+
+	describe("string filters", () => {
+		test("Contains (case-insensitive)", () => {
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Contains",
+					value: "hello"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Contains",
+					value: "xyz"
+				})
+			).toBe(false);
+		});
+
+		test("Does not contain", () => {
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Does not contain",
+					value: "xyz"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Does not contain",
+					value: "hello"
+				})
+			).toBe(false);
+		});
+
+		test("Starts with", () => {
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Starts with",
+					value: "hello"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Starts with",
+					value: "world"
+				})
+			).toBe(false);
+		});
+
+		test("Ends with", () => {
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Ends with",
+					value: "world"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Ends with",
+					value: "hello"
+				})
+			).toBe(false);
+		});
+
+		test("Is (exact match, case-insensitive)", () => {
+			expect(
+				gradio_filter_fn(make_row("Hello"), "col_0", {
+					dtype: "string",
+					filter: "Is",
+					value: "hello"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Is",
+					value: "hello"
+				})
+			).toBe(false);
+		});
+
+		test("Is not", () => {
+			expect(
+				gradio_filter_fn(make_row("Hello World"), "col_0", {
+					dtype: "string",
+					filter: "Is not",
+					value: "hello"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("Hello"), "col_0", {
+					dtype: "string",
+					filter: "Is not",
+					value: "hello"
+				})
+			).toBe(false);
+		});
+
+		test("Is empty", () => {
+			expect(
+				gradio_filter_fn(make_row(""), "col_0", {
+					dtype: "string",
+					filter: "Is empty",
+					value: ""
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("  "), "col_0", {
+					dtype: "string",
+					filter: "Is empty",
+					value: ""
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row("hello"), "col_0", {
+					dtype: "string",
+					filter: "Is empty",
+					value: ""
+				})
+			).toBe(false);
+		});
+
+		test("Is not empty", () => {
+			expect(
+				gradio_filter_fn(make_row("hello"), "col_0", {
+					dtype: "string",
+					filter: "Is not empty",
+					value: ""
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(""), "col_0", {
+					dtype: "string",
+					filter: "Is not empty",
+					value: ""
+				})
+			).toBe(false);
+		});
+	});
+
+	describe("edge cases", () => {
+		test("null cell value coerced to empty string", () => {
+			expect(
+				gradio_filter_fn(make_row(null), "col_0", {
+					dtype: "string",
+					filter: "Is empty",
+					value: ""
+				})
+			).toBe(true);
+		});
+
+		test("undefined filter value coerced to empty string", () => {
+			expect(
+				gradio_filter_fn(make_row("hello"), "col_0", {
+					dtype: "string",
+					filter: "Contains",
+					value: undefined
+				})
+			).toBe(true);
+		});
+
+		test("unknown filter returns true (passthrough)", () => {
+			expect(
+				gradio_filter_fn(make_row("hello"), "col_0", {
+					dtype: "string",
+					filter: "UnknownFilter",
+					value: "x"
+				})
+			).toBe(true);
+			expect(
+				gradio_filter_fn(make_row(42), "col_0", {
+					dtype: "number",
+					filter: "UnknownFilter",
+					value: "5"
+				})
+			).toBe(true);
+		});
+	});
+});