@gradio/dataframe 0.17.17 → 0.18.0

package/shared/FilterMenu.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { Check } from "@gradio/icons";
+	import DropdownArrow from "../../icons/src/DropdownArrow.svelte";
+	import type { FilterDatatype } from "./context/dataframe_context";
+
+	export let on_filter: (
+		datatype: FilterDatatype,
+		selected_filter: string,
+		value: string
+	) => void = () => {};
+
+	let menu_element: HTMLDivElement;
+	let datatype: "string" | "number" = "string";
+	let current_filter = "Contains";
+	let filter_dropdown_open = false;
+	let filter_input_value = "";
+
+	const filter_options = {
+		string: [
+			"Contains",
+			"Does not contain",
+			"Starts with",
+			"Ends with",
+			"Is",
+			"Is not",
+			"Is empty",
+			"Is not empty"
+		],
+		number: ["=", "≠", ">", "<", "≥", "≤", "Is empty", "Is not empty"]
+	};
+
+	onMount(() => {
+		position_menu();
+	});
+
+	function position_menu(): void {
+		if (!menu_element) return;
+
+		const viewport_width = window.innerWidth;
+		const viewport_height = window.innerHeight;
+		const menu_rect = menu_element.getBoundingClientRect();
+
+		const x = (viewport_width - menu_rect.width) / 2;
+		const y = (viewport_height - menu_rect.height) / 2;
+
+		menu_element.style.left = `${x}px`;
+		menu_element.style.top = `${y}px`;
+	}
+
+	function handle_filter_input(e: Event): void {
+		const target = e.target as HTMLInputElement;
+		filter_input_value = target.value;
+	}
+</script>
+
+<div>
+	<div class="background"></div>
+	<div bind:this={menu_element} class="filter-menu">
+		<div class="filter-datatype-container">
+			<span>Filter as</span>
+			<button
+				on:click|stopPropagation={() => {
+					datatype = datatype === "string" ? "number" : "string";
+					current_filter = filter_options[datatype][0];
+				}}
+				aria-label={`Change filter type. Filtering ${datatype}s`}
+			>
+				{datatype}
+			</button>
+		</div>
+
+		<div class="input-container">
+			<div class="filter-dropdown">
+				<button
+					on:click|stopPropagation={() =>
+						(filter_dropdown_open = !filter_dropdown_open)}
+					aria-label={`Change filter. Using '${current_filter}'`}
+				>
+					{current_filter}
+					<DropdownArrow />
+				</button>
+
+				{#if filter_dropdown_open}
+					<div class="dropdown-filter-options">
+						{#each filter_options[datatype] as opt}
+							<button
+								on:click|stopPropagation={() => {
+									current_filter = opt;
+									filter_dropdown_open = !filter_dropdown_open;
+								}}
+								class="filter-option"
+							>
+								{opt}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<input
+				type="text"
+				value={filter_input_value}
+				on:click|stopPropagation
+				on:input={handle_filter_input}
+				placeholder="Type a value"
+				class="filter-input"
+			/>
+		</div>
+
+		<button
+			class="check-button"
+			on:click={() => on_filter(datatype, current_filter, filter_input_value)}
+		>
+			<Check />
+		</button>
+	</div>
+</div>
+
+<style>
+	.background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.4);
+		z-index: 20;
+	}
+
+	.filter-menu {
+		position: fixed;
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-2);
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+		box-shadow: var(--shadow-drop-lg);
+		width: 300px;
+		z-index: 21;
+	}
+
+	.filter-datatype-container {
+		display: flex;
+		gap: var(--size-2);
+		align-items: center;
+	}
+
+	.filter-menu span {
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+	}
+
+	.filter-menu button {
+		height: var(--size-6);
+		background: none;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-1) var(--size-2);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--size-2);
+	}
+
+	.filter-menu button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.filter-input {
+		width: var(--size-full);
+		height: var(--size-6);
+		padding: var(--size-2);
+		padding-right: var(--size-8);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		background: var(--background-fill-secondary);
+		transition: all 0.2s ease;
+	}
+
+	.filter-input:hover {
+		border-color: var(--border-color-secondary);
+		background: var(--background-fill-primary);
+	}
+
+	.filter-input:focus {
+		outline: none;
+		border-color: var(--color-accent);
+		background: var(--background-fill-primary);
+		box-shadow: 0 0 0 1px var(--color-accent);
+	}
+
+	.dropdown-filter-options {
+		display: flex;
+		flex-direction: column;
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		box-shadow: var(--shadow-drop-md);
+		position: absolute;
+		z-index: var(--layer-1);
+	}
+
+	.dropdown-filter-options .filter-option {
+		border: none;
+		justify-content: flex-start;
+	}
+
+	.input-container {
+		display: flex;
+		gap: var(--size-2);
+		align-items: center;
+	}
+
+	.input-container button {
+		width: 130px;
+	}
+
+	:global(svg.dropdown-arrow) {
+		width: var(--size-4);
+		height: var(--size-4);
+		margin-left: auto;
+	}
+
+	.filter-menu .check-button {
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		width: var(--size-full);
+		height: var(--size-6);
+		border-radius: var(--radius-sm);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--size-1);
+	}
+
+	.check-button:hover {
+		background: var(--color-accent-soft);
+	}
+</style>

package/shared/Table.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" context="module">
 	import {
 		create_dataframe_context,
-		type SortDirection
+		type SortDirection,
+		type FilterDatatype
 	} from "./context/dataframe_context";
 </script>
 
@@ -43,6 +44,7 @@
 		type DragHandlers
 	} from "./utils/drag_utils";
 	import { sort_data_and_preserve_selection } from "./utils/sort_utils";
+	import { filter_data_and_preserve_selection } from "./utils/filter_utils";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
@@ -261,6 +263,12 @@
 			df_actions.reset_sort_state();
 		}
 
+		if ($df_state.filter_state.filter_columns.length > 0) {
+			filter_data(data, display_value, styling);
+		} else {
+			df_actions.reset_filter_state();
+		}
+
 		if ($df_state.current_search_query) {
 			df_actions.handle_search(null);
 		}
@@ -340,11 +348,33 @@
 
 	function clear_sort(): void {
 		df_actions.reset_sort_state();
+		sort_data(data, display_value, styling);
 	}
 
-	$: if ($df_state.sort_state.sort_columns.length > 0) {
-		sort_data(data, display_value, styling);
-		df_actions.update_row_order(data);
+	$: {
+		if ($df_state.filter_state.filter_columns.length > 0) {
+			filter_data(data, display_value, styling);
+		}
+
+		if ($df_state.sort_state.sort_columns.length > 0) {
+			sort_data(data, display_value, styling);
+			df_actions.update_row_order(data);
+		}
+	}
+
+	function handle_filter(
+		col: number,
+		datatype: FilterDatatype,
+		filter: string,
+		value: string
+	): void {
+		df_actions.handle_filter(col, datatype, filter, value);
+		filter_data(data, display_value, styling);
+	}
+
+	function clear_filter(): void {
+		df_actions.reset_filter_state();
+		filter_data(data, display_value, styling);
 	}
 
 	async function edit_header(i: number, _select = false): Promise<void> {
@@ -449,6 +479,9 @@
 
 	function set_cell_widths(): void {
 		const column_count = data[0]?.length || 0;
+		if ($df_state.filter_state.filter_columns.length > 0) {
+			return;
+		}
 		if (
 			last_width_data_length === data.length &&
 			last_width_column_count === column_count &&
@@ -513,6 +546,26 @@
 		selected = result.selected;
 	}
 
+	function filter_data(
+		_data: typeof data,
+		_display_value: string[][] | null,
+		_styling: string[][] | null
+	): void {
+		const result = filter_data_and_preserve_selection(
+			_data,
+			_display_value,
+			_styling,
+			$df_state.filter_state.filter_columns,
+			selected,
+			get_current_indices,
+			$df_state.filter_state.initial_data?.data,
+			$df_state.filter_state.initial_data?.display_value,
+			$df_state.filter_state.initial_data?.styling
+		);
+		data = result.data;
+		selected = result.selected;
+	}
+
 	$: selected_index = !!selected && selected[0];
 
 	let is_visible = false;
@@ -802,6 +855,7 @@
 							{toggle_header_menu}
 							{end_header_edit}
 							sort_columns={$df_state.sort_state.sort_columns}
+							filter_columns={$df_state.filter_state.filter_columns}
 							{latex_delimiters}
 							{line_breaks}
 							{max_chars}
@@ -906,6 +960,7 @@
 								{toggle_header_menu}
 								{end_header_edit}
 								sort_columns={$df_state.sort_state.sort_columns}
+								filter_columns={$df_state.filter_state.filter_columns}
 								{latex_delimiters}
 								{line_breaks}
 								{max_chars}
@@ -1022,6 +1077,25 @@
 					(item) => item.col === (active_header_menu?.col ?? -1)
 				) + 1 || null
 			: null}
+		on_filter={active_header_menu
+			? (datatype, filter, value) => {
+					if (active_header_menu) {
+						handle_filter(active_header_menu.col, datatype, filter, value);
+						df_actions.set_active_header_menu(null);
+					}
+				}
+			: undefined}
+		on_clear_filter={active_header_menu
+			? () => {
+					clear_filter();
+					df_actions.set_active_header_menu(null);
+				}
+			: undefined}
+		filter_active={active_header_menu
+			? $df_state.filter_state.filter_columns.some(
+					(c) => c.col === (active_header_menu?.col ?? -1)
+				)
+			: null}
 	/>
 {/if}
 

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;
@@ -34,6 +42,7 @@
 
 	$: 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/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,