@gradio/dataframe 0.17.17 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/dataframe
 
+## 0.18.0
+
+### Features
+
+- [#11392](https://github.com/gradio-app/gradio/pull/11392) [`dc760a6`](https://github.com/gradio-app/gradio/commit/dc760a6dd7d3375f99913059803a826cdf0f7102) - Add column-specific filtering to `gr.Dataframe`.  Thanks @tiago-gsantos!
+
+### Fixes
+
+- [#11407](https://github.com/gradio-app/gradio/pull/11407) [`f3f9590`](https://github.com/gradio-app/gradio/commit/f3f9590d539b9e6fe3937a1bdc48006ee174fb8f) - Fix Styled DataFrame Sorting.  Thanks @deckar01!
+
+### Dependency updates
+
+- @gradio/upload@0.16.9
+- @gradio/client@1.15.4
+- @gradio/button@0.5.5
+
 ## 0.17.17
 
 ### Fixes

package/Dataframe.stories.svelte

@@ -111,12 +111,11 @@
 		const canvas = within(canvasElement);
 		const cells = canvas.getAllByRole("cell");
 		const initial_value = cells[0].textContent;
-
 		await userEvent.click(cells[0]);
 		await userEvent.keyboard("new value");
 
 		const final_value = cells[0].textContent;
-		if (initial_value !== final_value) {
+		if (initial_value?.trim() !== final_value?.trim()) {
 			throw new Error("Cell content changed when it should be non-editable");
 		}
 

package/Index.svelte

@@ -14,7 +14,6 @@
 	import type { Headers, Datatype, DataframeValue } from "./shared/utils";
 	import Image from "@gradio/image";
 
-	export let headers: Headers = [];
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -59,15 +58,6 @@
 	export let pinned_columns = 0;
 	export let static_columns: (string | number)[] = [];
 	export let fullscreen = false;
-
-	$: _headers = [...(value.headers || headers)];
-	$: display_value = value?.metadata?.display_value
-		? [...value?.metadata?.display_value]
-		: null;
-	$: styling =
-		!interactive && value?.metadata?.styling
-			? [...value?.metadata?.styling]
-			: null;
 </script>
 
 <Block
@@ -94,9 +84,9 @@
 		{row_count}
 		{col_count}
 		values={value.data}
-		{display_value}
-		{styling}
-		headers={_headers}
+		display_value={value.metadata?.display_value}
+		styling={value.metadata?.styling}
+		headers={value.headers}
 		{fullscreen}
 		on:change={(e) => {
 			value.data = e.detail.data;

package/dist/Index.svelte

@@ -8,7 +8,6 @@ export { default as BaseExample } from "./Example.svelte";
 import Table from "./shared/Table.svelte";
 import { StatusTracker } from "@gradio/statustracker";
 import Image from "@gradio/image";
-export let headers = [];
 export let elem_id = "";
 export let elem_classes = [];
 export let visible = true;
@@ -42,12 +41,6 @@ export let show_search = "none";
 export let pinned_columns = 0;
 export let static_columns = [];
 export let fullscreen = false;
-$:
-  _headers = [...value.headers || headers];
-$:
-  display_value = value?.metadata?.display_value ? [...value?.metadata?.display_value] : null;
-$:
-  styling = !interactive && value?.metadata?.styling ? [...value?.metadata?.styling] : null;
 </script>
 
 <Block
@@ -74,9 +67,9 @@ $:
 		{row_count}
 		{col_count}
 		values={value.data}
-		{display_value}
-		{styling}
-		headers={_headers}
+		display_value={value.metadata?.display_value}
+		styling={value.metadata?.styling}
+		headers={value.headers}
 		{fullscreen}
 		on:change={(e) => {
 			value.data = e.detail.data;

package/dist/Index.svelte.d.ts

@@ -3,10 +3,9 @@ export { default as BaseDataFrame } from "./shared/Table.svelte";
 export { default as BaseExample } from "./Example.svelte";
 import type { Gradio, SelectData } from "@gradio/utils";
 import type { LoadingStatus } from "@gradio/statustracker";
-import type { Headers, Datatype, DataframeValue } from "./shared/utils";
+import type { Datatype, DataframeValue } from "./shared/utils";
 declare const __propDef: {
     props: {
-        headers?: Headers | undefined;
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
         visible?: boolean | undefined;
@@ -56,9 +55,6 @@ export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
 export type IndexSlots = typeof __propDef.slots;
 export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-    get headers(): Headers | undefined;
-    /**accessor*/
-    set headers(_: Headers | undefined);
     get elem_id(): string | undefined;
     /**accessor*/
     set elem_id(_: string | undefined);

package/dist/shared/CellMenu.svelte

@@ -1,5 +1,6 @@
 <script>import { onMount } from "svelte";
 import CellMenuIcons from "./CellMenuIcons.svelte";
+import FilterMenu from "./FilterMenu.svelte";
 export let x;
 export let y;
 export let on_add_row_above;
@@ -19,9 +20,15 @@ export let on_clear_sort = () => {
 };
 export let sort_direction = null;
 export let sort_priority = null;
+export let on_filter = () => {
+};
+export let on_clear_filter = () => {
+};
+export let filter_active = null;
 export let editable = true;
 export let i18n;
 let menu_element;
+let active_filter_menu = null;
 $:
   is_header = row === -1;
 $:
@@ -48,6 +55,17 @@ function position_menu() {
   menu_element.style.left = `${new_x}px`;
   menu_element.style.top = `${new_y}px`;
 }
+function toggle_filter_menu() {
+  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">
@@ -78,6 +96,21 @@ function position_menu() {
 			<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}
@@ -140,6 +173,10 @@ function position_menu() {
 	{/if}
 </div>
 
+{#if active_filter_menu}
+	<FilterMenu {on_filter} />
+{/if}
+
 <style>
 	.cell-menu {
 		position: fixed;

package/dist/shared/CellMenu.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/utils/src";
-import type { SortDirection } from "./context/dataframe_context";
+import type { SortDirection, FilterDatatype } from "./context/dataframe_context";
 declare const __propDef: {
     props: {
         x: number;
@@ -20,6 +20,9 @@ declare const __propDef: {
         on_clear_sort?: (() => void) | undefined;
         sort_direction?: (SortDirection | null) | undefined;
         sort_priority?: (number | null) | undefined;
+        on_filter?: ((datatype: FilterDatatype, selected_filter: string, value: string) => void) | undefined;
+        on_clear_filter?: (() => void) | undefined;
+        filter_active?: (boolean | null) | undefined;
         editable?: boolean | undefined;
         i18n: I18nFormatter;
     };

package/dist/shared/CellMenuIcons.svelte

@@ -188,4 +188,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/dist/shared/FilterMenu.svelte

@@ -0,0 +1,235 @@
+<script>import { onMount } from "svelte";
+import { Check } from "@gradio/icons";
+import DropdownArrow from "../../icons/src/DropdownArrow.svelte";
+export let on_filter = () => {
+};
+let menu_element;
+let datatype = "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: ["=", "\u2260", ">", "<", "\u2265", "\u2264", "Is empty", "Is not empty"]
+};
+onMount(() => {
+  position_menu();
+});
+function position_menu() {
+  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) {
+  const target = e.target;
+  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/dist/shared/FilterMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { FilterDatatype } from "./context/dataframe_context";
+declare const __propDef: {
+    props: {
+        on_filter?: ((datatype: FilterDatatype, selected_filter: string, value: string) => void) | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FilterMenuProps = typeof __propDef.props;
+export type FilterMenuEvents = typeof __propDef.events;
+export type FilterMenuSlots = typeof __propDef.slots;
+export default class FilterMenu extends SvelteComponent<FilterMenuProps, FilterMenuEvents, FilterMenuSlots> {
+}
+export {};

package/dist/shared/Table.svelte

@@ -33,6 +33,7 @@ import {
   create_drag_handlers
 } 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;
 export let label = null;
 export let show_label = true;
@@ -198,6 +199,11 @@ $:
       df_actions.handle_sort(-1, "asc");
       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);
     }
@@ -259,12 +265,25 @@ function handle_sort(col, direction) {
 }
 function clear_sort() {
   df_actions.reset_sort_state();
+  sort_data(data, display_value, styling);
 }
-$:
+$: {
+  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, datatype2, filter, value) {
+  df_actions.handle_filter(col, datatype2, filter, value);
+  filter_data(data, display_value, styling);
+}
+function clear_filter() {
+  df_actions.reset_filter_state();
+  filter_data(data, display_value, styling);
+}
 async function edit_header(i, _select = false) {
   if (!editable || header_edit === i || col_count[1] !== "dynamic")
     return;
@@ -355,6 +374,9 @@ let last_width_data_length = 0;
 let last_width_column_count = 0;
 function set_cell_widths() {
   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 && $df_state.sort_state.sort_columns.length > 0) {
     return;
   }
@@ -401,6 +423,21 @@ function sort_data(_data, _display_value, _styling) {
   data = result.data;
   selected = result.selected;
 }
+function filter_data(_data, _display_value, _styling) {
+  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;
@@ -656,6 +693,7 @@ function get_cell_display_value(row, col) {
 							{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}
@@ -760,6 +798,7 @@ function get_cell_display_value(row, col) {
 								{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}
@@ -876,6 +915,25 @@ function get_cell_display_value(row, col) {
 					(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}