@gradio/dataframe 0.17.17 → 0.18.1

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

@@ -36,15 +36,13 @@
 	export let coords: [number, number];
 	export let on_select_column: ((col: number) => void) | null = null;
 	export let on_select_row: ((row: number) => void) | null = null;
-	export let el: HTMLInputElement | null;
+	export let el: HTMLTextAreaElement | null;
 
 	const dispatch = createEventDispatcher<{
 		blur: { blur_event: FocusEvent; coords: [number, number] };
 		keydown: KeyboardEvent;
 	}>();
 
-	let is_expanded = false;
-
 	function truncate_text(
 		text: string | number,
 		max_length: number | null = null,
@@ -57,8 +55,7 @@
 		return str.slice(0, max_length) + "...";
 	}
 
-	$: should_truncate =
-		!edit && !is_expanded && max_chars !== null && max_chars > 0;
+	$: should_truncate = !edit && max_chars !== null && max_chars > 0;
 
 	$: display_content = editable
 		? value
@@ -70,7 +67,7 @@
 		? truncate_text(display_content, max_chars, datatype === "image")
 		: display_content;
 
-	function use_focus(node: HTMLInputElement): any {
+	function use_focus(node: HTMLTextAreaElement): any {
 		requestAnimationFrame(() => {
 			node.focus();
 		});
@@ -86,20 +83,9 @@
 	}
 
 	function handle_keydown(event: KeyboardEvent): void {
-		if (event.key === "Enter") {
-			if (!header) {
-				is_expanded = !is_expanded;
-			}
-		}
 		dispatch("keydown", event);
 	}
 
-	function handle_click(): void {
-		if (!edit && !header) {
-			is_expanded = !is_expanded;
-		}
-	}
-
 	function handle_bool_change(new_value: boolean): void {
 		value = new_value.toString();
 		dispatch("blur", {
@@ -116,10 +102,9 @@
 </script>
 
 {#if edit && datatype !== "bool"}
-	<input
+	<textarea
 		readonly={is_static}
 		aria-readonly={is_static}
-		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
 		bind:value
@@ -127,7 +112,6 @@
 		tabindex="-1"
 		on:blur={handle_blur}
 		on:mousedown|stopPropagation
-		on:mouseup|stopPropagation
 		on:click|stopPropagation
 		use:use_focus
 		on:keydown={handle_keydown}
@@ -143,18 +127,17 @@
 {:else}
 	<span
 		class:dragging={is_dragging}
-		on:click={handle_click}
 		on:keydown={handle_keydown}
 		tabindex="0"
 		role="button"
 		class:edit
-		class:expanded={is_expanded}
+		class:expanded={edit}
 		class:multiline={header}
 		on:focus|preventDefault
 		style={styling}
 		data-editable={editable}
 		data-max-chars={max_chars}
-		data-expanded={is_expanded}
+		data-expanded={edit}
 		placeholder=" "
 		class:text={datatype === "str"}
 		class:wrap={wrap_text}
@@ -202,7 +185,7 @@
 		cursor: crosshair !important;
 	}
 
-	input {
+	textarea {
 		position: absolute;
 		flex: 1 1 0%;
 		transform: translateX(-0.1px);
@@ -211,6 +194,16 @@
 		background: transparent;
 		cursor: text;
 		width: calc(100% - var(--size-2));
+		resize: none;
+		height: 100%;
+		padding-left: 0;
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: var(--line-lg);
+	}
+
+	textarea:focus {
+		outline: none;
 	}
 
 	span {
@@ -262,7 +255,7 @@
 		object-fit: contain;
 	}
 
-	input:read-only {
+	textarea:read-only {
 		cursor: not-allowed;
 	}
 

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;
@@ -163,7 +165,7 @@
 
 	let els: Record<
 		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	> = {};
 	let data_binding: Record<string, (typeof data)[0][0]> = {};
 	let _headers = make_headers(headers, col_count, els, make_id);
@@ -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/TableCell.svelte

@@ -59,7 +59,7 @@
 	export let components: Record<string, any> = {};
 	export let el: {
 		cell: HTMLTableCellElement | null;
-		input: HTMLInputElement | null;
+		input: HTMLTextAreaElement | null;
 	};
 	export let handle_select_column: (col: number) => void;
 	export let handle_select_row: (row: number) => void;