@gradio/dataframe 0.17.17 → 0.18.0

package/dist/shared/TableHeader.svelte

@@ -4,6 +4,7 @@ import { get_sort_status } from "./utils/sort_utils";
 import Padlock from "./icons/Padlock.svelte";
 import SortArrowUp from "./icons/SortArrowUp.svelte";
 import SortArrowDown from "./icons/SortArrowDown.svelte";
+import CellMenuIcons from "./CellMenuIcons.svelte";
 export let value;
 export let i;
 export let actual_pinned_columns;
@@ -15,6 +16,7 @@ export let handle_header_click;
 export let toggle_header_menu;
 export let end_header_edit;
 export let sort_columns = [];
+export let filter_columns = [];
 export let latex_delimiters;
 export let line_breaks;
 export let max_chars;
@@ -27,6 +29,8 @@ $:
   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;
 $:
@@ -50,6 +54,7 @@ function get_header_position(col_index) {
 	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"
@@ -112,6 +117,13 @@ function get_header_position(col_index) {
 						{/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 />
@@ -230,6 +242,20 @@ function get_header_position(col_index) {
 		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/dist/shared/TableHeader.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import type { SortDirection } from "./context/dataframe_context";
+import type { FilterDatatype } from "./context/dataframe_context";
 declare const __propDef: {
     props: {
         value: string;
@@ -17,6 +18,12 @@ declare const __propDef: {
             col: number;
             direction: SortDirection;
         }[] | undefined;
+        filter_columns?: {
+            col: number;
+            datatype: FilterDatatype;
+            filter: string;
+            value: string;
+        }[] | undefined;
         latex_delimiters: {
             left: string;
             right: string;

package/dist/shared/context/dataframe_context.d.ts

@@ -2,6 +2,7 @@ import { writable } from "svelte/store";
 import { get_next_cell_coordinates, get_range_selection, move_cursor } from "../selection_utils";
 export declare const DATAFRAME_KEY: unique symbol;
 export type SortDirection = "asc" | "desc";
+export type FilterDatatype = "string" | "number";
 export type CellCoordinate = [number, number];
 interface DataFrameState {
     config: {
@@ -34,6 +35,22 @@ 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;
@@ -62,6 +79,7 @@ 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[][], display_value: string[][] | null, styling: string[][] | null) => void;
     update_row_order: (data: any[][]) => void;
@@ -88,6 +106,7 @@ interface DataFrameActions {
     };
     trigger_change: (data: any[][], headers: any[], previous_data: string[][], previous_headers: string[], value_is_output: boolean, 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;

package/dist/shared/context/dataframe_context.js

@@ -30,6 +30,11 @@ function create_actions(state, context) {
         }
         return { data: new_data, headers: new_headers };
     };
+    const update_array = (source, target) => {
+        if (source && target) {
+            target.splice(0, target.length, ...JSON.parse(JSON.stringify(source)));
+        }
+    };
     return {
         handle_search: (query) => update_state((s) => ({ current_search_query: query })),
         handle_sort: (col, direction) => update_state((s) => {
@@ -57,6 +62,33 @@ function create_actions(state, context) {
                 }
             };
         }),
+        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((item) => headers[item.col] === name);
@@ -127,7 +159,8 @@ function create_actions(state, context) {
                 !dequal(current_headers, previous_headers)) {
                 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", {
@@ -142,11 +175,6 @@ function create_actions(state, context) {
         reset_sort_state: () => update_state((s) => {
             if (s.sort_state.initial_data && context.data) {
                 const original = s.sort_state.initial_data;
-                const update_array = (source, target) => {
-                    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);
@@ -155,6 +183,17 @@ function create_actions(state, context) {
                 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 }
         })),
@@ -341,6 +380,7 @@ export function create_dataframe_context(config) {
         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,

package/dist/shared/utils/filter_utils.d.ts

@@ -0,0 +1,28 @@
+export type FilterDatatype = "string" | "number";
+export declare function filter_data(data: {
+    id: string;
+    value: string | number;
+}[][], filter_columns: {
+    col: number;
+    datatype: FilterDatatype;
+    filter: string;
+    value: string;
+}[]): number[];
+export declare 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;
+};

package/dist/shared/utils/filter_utils.js

@@ -0,0 +1,123 @@
+import { filter_table_data } from "./table_utils";
+export function filter_data(data, filter_columns) {
+    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, display_value, styling, filter_columns, selected, get_current_indices, original_data, original_display_value, original_styling) {
+    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/dist/shared/utils/table_utils.d.ts

@@ -1,5 +1,6 @@
 import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
 import type { SortDirection } from "./sort_utils";
+import type { FilterDatatype } from "./filter_utils";
 export declare function make_cell_id(row: number, col: number): string;
 export declare function make_header_id(col: number): string;
 export declare function get_max(data: TableData): TableCell[];
@@ -7,6 +8,12 @@ export declare function sort_table_data(data: TableData, display_value: string[]
     col: number;
     direction: SortDirection;
 }[]): void;
+export declare 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;
 export declare function copy_table_data(data: TableData, selected_cells: [number, number][] | null): Promise<void>;
 export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
 export declare function data_uri_to_blob(data_uri: string): Blob;

package/dist/shared/utils/table_utils.js

@@ -1,4 +1,5 @@
 import { sort_data } from "./sort_utils";
+import { filter_data } from "./filter_utils";
 import { dsvFormat } from "d3-dsv";
 export function make_cell_id(row, col) {
     return `cell-${row}-${col}`;
@@ -36,6 +37,34 @@ export function sort_table_data(data, display_value, styling, sort_columns) {
         styling.splice(0, styling.length, ...new_styling);
     }
 }
+export function filter_table_data(data, display_value, styling, filter_columns, original_data, original_display_value, original_styling) {
+    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) => base_data[i]);
+    data.splice(0, data.length, ...new_data);
+    if (display_value && base_display_value) {
+        const new_display = indices.map((i) => base_display_value[i]);
+        display_value.splice(0, display_value.length, ...new_display);
+    }
+    if (styling && base_styling) {
+        const new_styling = indices.map((i) => base_styling[i]);
+        styling.splice(0, styling.length, ...new_styling);
+    }
+}
 export async function copy_table_data(data, selected_cells) {
     if (!data || !data.length)
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.17",
+  "version": "0.18.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -19,13 +19,13 @@
     "marked": "^12.0.0",
     "@gradio/atoms": "^0.16.2",
     "@gradio/checkbox": "^0.4.24",
-    "@gradio/button": "^0.5.4",
-    "@gradio/icons": "^0.12.0",
-    "@gradio/markdown-code": "^0.4.4",
+    "@gradio/client": "^1.15.4",
+    "@gradio/button": "^0.5.5",
     "@gradio/statustracker": "^0.10.13",
-    "@gradio/upload": "^0.16.8",
-    "@gradio/client": "^1.15.3",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/icons": "^0.12.0",
+    "@gradio/upload": "^0.16.9",
+    "@gradio/utils": "^0.10.2",
+    "@gradio/markdown-code": "^0.4.4"
   },
   "exports": {
     ".": {

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}