@gradio/dataframe 0.17.16 → 0.18.0

package/shared/CellMenu.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
+	import FilterMenu from "./FilterMenu.svelte";
 	import type { I18nFormatter } from "js/utils/src";
-	import type { SortDirection } from "./context/dataframe_context";
+	import type {
+		SortDirection,
+		FilterDatatype
+	} from "./context/dataframe_context";
 
 	export let x: number;
 	export let y: number;
@@ -21,10 +25,18 @@
 	export let on_clear_sort: () => void = () => {};
 	export let sort_direction: SortDirection | null = null;
 	export let sort_priority: number | null = null;
+	export let on_filter: (
+		datatype: FilterDatatype,
+		selected_filter: string,
+		value: string
+	) => void = () => {};
+	export let on_clear_filter: () => void = () => {};
+	export let filter_active: boolean | null = null;
 	export let editable = true;
 
 	export let i18n: I18nFormatter;
 	let menu_element: HTMLDivElement;
+	let active_filter_menu: { x: number; y: number } | null = null;
 
 	$: is_header = row === -1;
 	$: can_add_rows = editable && row_count[1] === "dynamic";
@@ -55,6 +67,19 @@
 		menu_element.style.left = `${new_x}px`;
 		menu_element.style.top = `${new_y}px`;
 	}
+
+	function toggle_filter_menu(): void {
+		if (filter_active) {
+			on_filter("string", "", "");
+			return;
+		}
+
+		const menu_rect = menu_element.getBoundingClientRect();
+		active_filter_menu = {
+			x: menu_rect.right,
+			y: menu_rect.top + menu_rect.height / 2
+		};
+	}
 </script>
 
 <div bind:this={menu_element} class="cell-menu" role="menu">
@@ -85,6 +110,21 @@
 			<CellMenuIcons icon="clear-sort" />
 			{i18n("dataframe.clear_sort")}
 		</button>
+		<button
+			role="menuitem"
+			on:click|stopPropagation={toggle_filter_menu}
+			class:active={filter_active || active_filter_menu}
+		>
+			<CellMenuIcons icon="filter" />
+			{i18n("dataframe.filter")}
+			{#if filter_active}
+				<span class="priority">1</span>
+			{/if}
+		</button>
+		<button role="menuitem" on:click={on_clear_filter}>
+			<CellMenuIcons icon="clear-filter" />
+			{i18n("dataframe.clear_filter")}
+		</button>
 	{/if}
 
 	{#if !is_header && can_add_rows}
@@ -147,6 +187,10 @@
 	{/if}
 </div>
 
+{#if active_filter_menu}
+	<FilterMenu {on_filter} />
+{/if}
+
 <style>
 	.cell-menu {
 		position: fixed;

package/shared/CellMenuIcons.svelte

@@ -189,4 +189,52 @@
 			stroke-linecap="round"
 		/>
 	</svg>
+{:else if icon == "filter"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M8 9H16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M11 13H13"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "clear-filter"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M8 9H16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M11 13H13"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M17 17L21 21M21 17L17 21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
 {/if}

package/shared/EditableCell.svelte

@@ -26,7 +26,6 @@
 	export let line_breaks = true;
 	export let editable = true;
 	export let is_static = false;
-	export let root: string;
 	export let max_chars: number | null = null;
 	export let components: Record<string, any> = {};
 	export let i18n: I18nFormatter;
@@ -178,7 +177,6 @@
 				{latex_delimiters}
 				{line_breaks}
 				chatbot={false}
-				{root}
 			/>
 		{:else}
 			{display_text}

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,10 +855,10 @@
 							{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}
-							{root}
 							{editable}
 							is_static={static_columns.includes(i)}
 							{i18n}
@@ -830,7 +883,6 @@
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 									edit={false}
 									el={null}
-									{root}
 									{editable}
 									{i18n}
 									show_selection_buttons={selected_cells.length === 1 &&
@@ -908,10 +960,10 @@
 								{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}
-								{root}
 								{editable}
 								is_static={static_columns.includes(i)}
 								{i18n}
@@ -949,7 +1001,6 @@
 								datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 								{editing}
 								{max_chars}
-								{root}
 								{editable}
 								is_static={static_columns.includes(j)}
 								{i18n}
@@ -1026,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/TableCell.svelte

@@ -53,7 +53,6 @@
 	export let datatype: Datatype;
 	export let editing: [number, number] | false;
 	export let max_chars: number | undefined;
-	export let root: string;
 	export let editable: boolean;
 	export let is_static = false;
 	export let i18n: I18nFormatter;
@@ -139,7 +138,6 @@
 				}
 			}}
 			on:blur={handle_blur}
-			{root}
 			{max_chars}
 			{i18n}
 			{components}

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;
@@ -26,7 +34,6 @@
 	}[];
 	export let line_breaks: boolean;
 	export let max_chars: number | undefined;
-	export let root: string;
 	export let editable: boolean;
 	export let i18n: I18nFormatter;
 	export let el: HTMLInputElement | null;
@@ -35,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;
@@ -64,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"
@@ -105,7 +114,6 @@
 						}
 					}}
 					header
-					{root}
 					{editable}
 					{is_static}
 					{i18n}
@@ -127,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 />
@@ -245,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;