@gradio/dataframe 0.17.17 → 0.18.0

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