@gradio/dataframe 0.17.17 → 0.18.1

package/shared/TableHeader.svelte

@@ -7,6 +7,8 @@
 	import SortArrowUp from "./icons/SortArrowUp.svelte";
 	import SortArrowDown from "./icons/SortArrowDown.svelte";
 	import type { SortDirection } from "./context/dataframe_context";
+	import CellMenuIcons from "./CellMenuIcons.svelte";
+	import type { FilterDatatype } from "./context/dataframe_context";
 	export let value: string;
 	export let i: number;
 	export let actual_pinned_columns: number;
@@ -18,6 +20,12 @@
 	export let toggle_header_menu: (event: MouseEvent, col: number) => void;
 	export let end_header_edit: (event: CustomEvent<KeyboardEvent>) => void;
 	export let sort_columns: { col: number; direction: SortDirection }[] = [];
+	export let filter_columns: {
+		col: number;
+		datatype: FilterDatatype;
+		filter: string;
+		value: string;
+	}[] = [];
 
 	export let latex_delimiters: {
 		left: string;
@@ -28,12 +36,13 @@
 	export let max_chars: number | undefined;
 	export let editable: boolean;
 	export let i18n: I18nFormatter;
-	export let el: HTMLInputElement | null;
+	export let el: HTMLTextAreaElement | null;
 	export let is_static: boolean;
 	export let col_count: [number, "fixed" | "dynamic"];
 
 	$: can_add_columns = col_count && col_count[1] === "dynamic";
 	$: sort_index = sort_columns.findIndex((item) => item.col === i);
+	$: filter_index = filter_columns.findIndex((item) => item.col === i);
 	$: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
 	$: current_direction =
 		sort_index !== -1 ? sort_columns[sort_index].direction : null;
@@ -63,6 +72,7 @@
 	class:last-pinned={i === actual_pinned_columns - 1}
 	class:focus={header_edit === i || selected_header === i}
 	class:sorted={sort_index !== -1}
+	class:filtered={filter_index !== -1}
 	aria-sort={get_sort_status(value, sort_columns, headers) === "none"
 		? "none"
 		: get_sort_status(value, sort_columns, headers) === "asc"
@@ -125,6 +135,13 @@
 						{/if}
 					</div>
 				{/if}
+				{#if filter_index !== -1}
+					<div class="filter-indicators">
+						<span class="filter-icon">
+							<CellMenuIcons icon="filter" />
+						</span>
+					</div>
+				{/if}
 			</button>
 			{#if is_static}
 				<Padlock />
@@ -243,6 +260,20 @@
 		padding: var(--size-1-5);
 	}
 
+	.filter-indicators {
+		display: flex;
+		align-items: center;
+		margin-left: var(--size-1);
+		gap: var(--size-1);
+	}
+
+	.filter-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--body-text-color);
+	}
+
 	.pinned-column {
 		position: sticky;
 		z-index: 5;

package/shared/Toolbar.svelte

@@ -21,7 +21,7 @@
 	let input_value = "";
 
 	function handle_search_input(e: Event): void {
-		const target = e.target as HTMLInputElement;
+		const target = e.target as HTMLTextAreaElement;
 		input_value = target.value;
 		const new_query = input_value || null;
 		if (current_search_query !== new_query) {

package/shared/context/dataframe_context.ts

@@ -13,6 +13,7 @@ import {
 export const DATAFRAME_KEY = Symbol("dataframe");
 
 export type SortDirection = "asc" | "desc";
+export type FilterDatatype = "string" | "number";
 export type CellCoordinate = [number, number];
 
 interface DataFrameState {
@@ -40,6 +41,19 @@ interface DataFrameState {
 			styling: string[][] | null;
 		} | null;
 	};
+	filter_state: {
+		filter_columns: {
+			col: number;
+			datatype: FilterDatatype;
+			filter: string;
+			value: string;
+		}[];
+		initial_data: {
+			data: { id: string; value: string | number }[][];
+			display_value: string[][] | null;
+			styling: string[][] | null;
+		} | null;
+	};
 	ui_state: {
 		active_cell_menu: { row: number; col: number; x: number; y: number } | null;
 		active_header_menu: { col: number; x: number; y: number } | null;
@@ -60,6 +74,12 @@ interface DataFrameState {
 interface DataFrameActions {
 	handle_search: (query: string | null) => void;
 	handle_sort: (col: number, direction: SortDirection) => void;
+	handle_filter: (
+		col: number,
+		datatype: FilterDatatype,
+		filter: string,
+		value: string
+	) => void;
 	get_sort_status: (name: string, headers: string[]) => "none" | "asc" | "desc";
 	sort_data: (
 		data: any[][],
@@ -109,6 +129,7 @@ interface DataFrameActions {
 		dispatch: (e: "change" | "input", detail?: any) => void
 	) => Promise<void>;
 	reset_sort_state: () => void;
+	reset_filter_state: () => void;
 	set_active_cell_menu: (
 		menu: { row: number; col: number; x: number; y: number } | null
 	) => void;
@@ -158,7 +179,7 @@ export interface DataFrameContext {
 	styling?: string[][] | null;
 	els?: Record<
 		string,
-		{ cell: HTMLTableCellElement | null; input: HTMLInputElement | null }
+		{ cell: HTMLTableCellElement | null; input: HTMLTextAreaElement | null }
 	>;
 	parent_element?: HTMLElement;
 	get_data_at?: (row: number, col: number) => string | number;
@@ -209,6 +230,15 @@ function create_actions(
 		return { data: new_data, headers: new_headers };
 	};
 
+	const update_array = (
+		source: { id: string; value: string | number }[][] | string[][] | null,
+		target: any[] | null | undefined
+	): void => {
+		if (source && target) {
+			target.splice(0, target.length, ...JSON.parse(JSON.stringify(source)));
+		}
+	};
+
 	return {
 		handle_search: (query) =>
 			update_state((s) => ({ current_search_query: query })),
@@ -247,6 +277,39 @@ function create_actions(
 					}
 				};
 			}),
+		handle_filter: (col, datatype, filter, value) =>
+			update_state((s) => {
+				const filter_cols = s.filter_state.filter_columns.some(
+					(c) => c.col === col
+				)
+					? s.filter_state.filter_columns.filter((c) => c.col !== col)
+					: [
+							...s.filter_state.filter_columns,
+							{ col, datatype, filter, value }
+						];
+
+				const initial_data =
+					s.filter_state.initial_data ||
+					(context.data && filter_cols.length > 0
+						? {
+								data: JSON.parse(JSON.stringify(context.data)),
+								display_value: context.display_value
+									? JSON.parse(JSON.stringify(context.display_value))
+									: null,
+								styling: context.styling
+									? JSON.parse(JSON.stringify(context.styling))
+									: null
+							}
+						: null);
+
+				return {
+					filter_state: {
+						...s.filter_state,
+						filter_columns: filter_cols,
+						initial_data: initial_data
+					}
+				};
+			}),
 		get_sort_status: (name, headers) => {
 			const s = get(state);
 			const sort_item = s.sort_state.sort_columns.find(
@@ -345,7 +408,8 @@ function create_actions(
 			) {
 				if (!dequal(current_headers, previous_headers)) {
 					update_state((s) => ({
-						sort_state: { sort_columns: [], row_order: [], initial_data: null }
+						sort_state: { sort_columns: [], row_order: [], initial_data: null },
+						filter_state: { filter_columns: [], initial_data: null }
 					}));
 				}
 				dispatch("change", {
@@ -361,22 +425,6 @@ function create_actions(
 				if (s.sort_state.initial_data && context.data) {
 					const original = s.sort_state.initial_data;
 
-					const update_array = (
-						source:
-							| { id: string; value: string | number }[][]
-							| string[][]
-							| null,
-						target: any[] | null | undefined
-					): void => {
-						if (source && target) {
-							target.splice(
-								0,
-								target.length,
-								...JSON.parse(JSON.stringify(source))
-							);
-						}
-					};
-
 					update_array(original.data, context.data);
 					update_array(original.display_value, context.display_value);
 					update_array(original.styling, context.styling);
@@ -386,6 +434,20 @@ function create_actions(
 					sort_state: { sort_columns: [], row_order: [], initial_data: null }
 				};
 			}),
+		reset_filter_state: () =>
+			update_state((s) => {
+				if (s.filter_state.initial_data && context.data) {
+					const original = s.filter_state.initial_data;
+
+					update_array(original.data, context.data);
+					update_array(original.display_value, context.display_value);
+					update_array(original.styling, context.styling);
+				}
+
+				return {
+					filter_state: { filter_columns: [], initial_data: null }
+				};
+			}),
 		set_active_cell_menu: (menu) =>
 			update_state((s) => ({
 				ui_state: { ...s.ui_state, active_cell_menu: menu }
@@ -599,6 +661,7 @@ export function create_dataframe_context(
 		config,
 		current_search_query: null,
 		sort_state: { sort_columns: [], row_order: [], initial_data: null },
+		filter_state: { filter_columns: [], initial_data: null },
 		ui_state: {
 			active_cell_menu: null,
 			active_header_menu: null,

package/shared/types.ts

@@ -22,7 +22,7 @@ export type ElementRefs = Record<
 	string,
 	{
 		cell: null | HTMLTableCellElement;
-		input: null | HTMLInputElement;
+		input: null | HTMLTextAreaElement;
 	}
 >;
 

package/shared/utils/data_processing.ts

@@ -5,7 +5,7 @@ export function make_headers(
 	col_count: [number, "fixed" | "dynamic"],
 	els: Record<
 		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	>,
 	make_id: () => string
 ): HeadersWithIDs {
@@ -38,7 +38,7 @@ export function process_data(
 	values: (string | number)[][],
 	els: Record<
 		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	>,
 	data_binding: Record<string, any>,
 	make_id: () => string,

package/shared/utils/filter_utils.ts

@@ -0,0 +1,207 @@
+import { filter_table_data } from "./table_utils";
+
+export type FilterDatatype = "string" | "number";
+
+export function filter_data(
+	data: { id: string; value: string | number }[][],
+	filter_columns: {
+		col: number;
+		datatype: FilterDatatype;
+		filter: string;
+		value: string;
+	}[]
+): number[] {
+	if (!data || !data.length || !data[0]) {
+		return [];
+	}
+	let row_indices = [...Array(data.length)].map((_, i) => i);
+
+	if (filter_columns.length > 0) {
+		filter_columns.forEach((column) => {
+			if (column.datatype === "string") {
+				switch (column.filter) {
+					case "Contains":
+						row_indices = row_indices.filter((i) =>
+							data[i][column.col]?.value.toString().includes(column.value)
+						);
+						break;
+					case "Does not contain":
+						row_indices = row_indices.filter(
+							(i) =>
+								!data[i][column.col]?.value.toString().includes(column.value)
+						);
+						break;
+					case "Starts with":
+						row_indices = row_indices.filter((i) =>
+							data[i][column.col]?.value.toString().startsWith(column.value)
+						);
+						break;
+					case "Ends with":
+						row_indices = row_indices.filter((i) =>
+							data[i][column.col]?.value.toString().endsWith(column.value)
+						);
+						break;
+					case "Is":
+						row_indices = row_indices.filter(
+							(i) => data[i][column.col]?.value.toString() === column.value
+						);
+						break;
+					case "Is not":
+						row_indices = row_indices.filter(
+							(i) => !(data[i][column.col]?.value.toString() === column.value)
+						);
+						break;
+					case "Is empty":
+						row_indices = row_indices.filter(
+							(i) => data[i][column.col]?.value.toString() === ""
+						);
+						break;
+					case "Is not empty":
+						row_indices = row_indices.filter(
+							(i) => !(data[i][column.col]?.value.toString() === "")
+						);
+						break;
+				}
+			} else if (column.datatype === "number") {
+				switch (column.filter) {
+					case "=":
+						row_indices = row_indices.filter((i) => {
+							if (
+								!isNaN(Number(data[i][column.col]?.value)) &&
+								!isNaN(Number(column.value))
+							) {
+								return (
+									Number(data[i][column.col]?.value) === Number(column.value)
+								);
+							}
+							return false;
+						});
+						break;
+					case "≠":
+						row_indices = row_indices.filter((i) => {
+							if (
+								!isNaN(Number(data[i][column.col]?.value)) &&
+								!isNaN(Number(column.value))
+							) {
+								return !(
+									Number(data[i][column.col]?.value) === Number(column.value)
+								);
+							}
+							return false;
+						});
+						break;
+					case ">":
+						row_indices = row_indices.filter((i) => {
+							if (
+								!isNaN(Number(data[i][column.col]?.value)) &&
+								!isNaN(Number(column.value))
+							) {
+								return (
+									Number(data[i][column.col]?.value) > Number(column.value)
+								);
+							}
+							return false;
+						});
+						break;
+					case "<":
+						row_indices = row_indices.filter((i) => {
+							if (
+								!isNaN(Number(data[i][column.col]?.value)) &&
+								!isNaN(Number(column.value))
+							) {
+								return (
+									Number(data[i][column.col]?.value) < Number(column.value)
+								);
+							}
+							return false;
+						});
+						break;
+					case "≥":
+						row_indices = row_indices.filter((i) => {
+							if (
+								!isNaN(Number(data[i][column.col]?.value)) &&
+								!isNaN(Number(column.value))
+							) {
+								return (
+									Number(data[i][column.col]?.value) >= Number(column.value)
+								);
+							}
+							return false;
+						});
+						break;
+					case "≤":
+						row_indices = row_indices.filter((i) => {
+							if (
+								!isNaN(Number(data[i][column.col]?.value)) &&
+								!isNaN(Number(column.value))
+							) {
+								return (
+									Number(data[i][column.col]?.value) <= Number(column.value)
+								);
+							}
+							return false;
+						});
+						break;
+					case "Is empty":
+						row_indices = row_indices.filter(
+							(i) => data[i][column.col]?.value.toString() === ""
+						);
+						break;
+					case "Is not empty":
+						row_indices = row_indices.filter((i) => {
+							if (!isNaN(Number(data[i][column.col]?.value))) {
+								return !(data[i][column.col]?.value.toString() === "");
+							}
+							return false;
+						});
+						break;
+				}
+			}
+		});
+		return row_indices;
+	}
+	return [...Array(data.length)].map((_, i) => i);
+}
+
+export function filter_data_and_preserve_selection(
+	data: { id: string; value: string | number }[][],
+	display_value: string[][] | null,
+	styling: string[][] | null,
+	filter_columns: {
+		col: number;
+		datatype: FilterDatatype;
+		filter: string;
+		value: string;
+	}[],
+	selected: [number, number] | false,
+	get_current_indices: (
+		id: string,
+		data: { id: string; value: string | number }[][]
+	) => [number, number],
+	original_data?: { id: string; value: string | number }[][],
+	original_display_value?: string[][] | null,
+	original_styling?: string[][] | null
+): { 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;
+	}
+
+	filter_table_data(
+		data,
+		display_value,
+		styling,
+		filter_columns,
+		original_data,
+		original_display_value,
+		original_styling
+	);
+
+	let new_selected = selected;
+	if (id) {
+		const [i, j] = get_current_indices(id, data);
+		new_selected = [i, j];
+	}
+
+	return { data, selected: new_selected };
+}

package/shared/utils/keyboard_utils.ts

@@ -180,9 +180,10 @@ async function handle_enter_key(
 	const state = get(ctx.state);
 	if (!state.config.editable) return false;
 
-	event.preventDefault();
-
 	const editing = state.ui_state.editing;
+	if (editing && event.shiftKey) return false;
+
+	event.preventDefault();
 
 	if (editing && dequal(editing, [i, j])) {
 		const cell_id = ctx.data[i][j].id;
@@ -191,6 +192,8 @@ async function handle_enter_key(
 			await save_cell_value(input_el.value, ctx, i, j);
 		}
 		ctx.actions.set_editing(false);
+		await tick();
+		ctx.parent_element?.focus();
 	} else {
 		ctx.actions.set_editing([i, j]);
 	}

package/shared/utils/table_utils.ts

@@ -1,6 +1,8 @@
 import type { 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 { dsvFormat } from "d3-dsv";
 
 export function make_cell_id(row: number, col: number): string {
@@ -49,6 +51,56 @@ export function sort_table_data(
 	}
 }
 
+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