@gradio/dataframe 0.17.16 → 0.18.0

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