@gradio/dataframe 0.17.16 → 0.18.0

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,10 +693,10 @@ 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}
-							{root}
 							{editable}
 							is_static={static_columns.includes(i)}
 							{i18n}
@@ -684,7 +721,6 @@ function get_cell_display_value(row, col) {
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 									edit={false}
 									el={null}
-									{root}
 									{editable}
 									{i18n}
 									show_selection_buttons={selected_cells.length === 1 &&
@@ -762,10 +798,10 @@ 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}
-								{root}
 								{editable}
 								is_static={static_columns.includes(i)}
 								{i18n}
@@ -803,7 +839,6 @@ function get_cell_display_value(row, col) {
 								datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 								{editing}
 								{max_chars}
-								{root}
 								{editable}
 								is_static={static_columns.includes(j)}
 								{i18n}
@@ -880,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}
 

package/dist/shared/TableCell.svelte

@@ -20,7 +20,6 @@ export let line_breaks;
 export let datatype;
 export let editing;
 export let max_chars;
-export let root;
 export let editable;
 export let is_static = false;
 export let i18n;
@@ -101,7 +100,6 @@ $:
 				}
 			}}
 			on:blur={handle_blur}
-			{root}
 			{max_chars}
 			{i18n}
 			{components}

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

@@ -34,7 +34,6 @@ declare const __propDef: {
         datatype: Datatype;
         editing: [number, number] | false;
         max_chars: number | undefined;
-        root: string;
         editable: boolean;
         is_static?: boolean | undefined;
         i18n: I18nFormatter;

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,10 +16,10 @@ 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;
-export let root;
 export let editable;
 export let i18n;
 export let el;
@@ -28,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;
 $:
@@ -51,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"
@@ -92,7 +96,6 @@ function get_header_position(col_index) {
 						}
 					}}
 					header
-					{root}
 					{editable}
 					{is_static}
 					{i18n}
@@ -114,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 />
@@ -232,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;
@@ -24,7 +31,6 @@ declare const __propDef: {
         }[];
         line_breaks: boolean;
         max_chars: number | undefined;
-        root: string;
         editable: boolean;
         i18n: I18nFormatter;
         el: HTMLInputElement | null;

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.16",
+  "version": "0.18.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,15 +17,15 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.16.1",
-    "@gradio/button": "^0.5.3",
+    "@gradio/atoms": "^0.16.2",
+    "@gradio/checkbox": "^0.4.24",
+    "@gradio/client": "^1.15.4",
+    "@gradio/button": "^0.5.5",
+    "@gradio/statustracker": "^0.10.13",
     "@gradio/icons": "^0.12.0",
-    "@gradio/statustracker": "^0.10.12",
-    "@gradio/checkbox": "^0.4.23",
-    "@gradio/upload": "^0.16.7",
-    "@gradio/markdown-code": "^0.4.3",
-    "@gradio/client": "^1.15.2",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/upload": "^0.16.9",
+    "@gradio/utils": "^0.10.2",
+    "@gradio/markdown-code": "^0.4.4"
   },
   "exports": {
     ".": {