@gradio/dataframe 0.19.2 → 0.19.4

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @gradio/dataframe
 
+## 0.19.4
+
+### Fixes
+
+- [#11648](https://github.com/gradio-app/gradio/pull/11648) [`57d8d65`](https://github.com/gradio-app/gradio/commit/57d8d6598645e438337c78c1c8e0759f876fb193) - Dataframe Edit Event.  Thanks @deckar01!
+
+### Dependency updates
+
+- @gradio/markdown-code@0.5.2
+
+## 0.19.3
+
+### Features
+
+- [#11891](https://github.com/gradio-app/gradio/pull/11891) [`8d06ab7`](https://github.com/gradio-app/gradio/commit/8d06ab7d899cb8b1ab2a9575f19b8960999aba78) - Add select all checkbox for boolean columns in Dataframe.  Thanks @abidlabs!
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.1
+- @gradio/atoms@0.18.0
+- @gradio/checkbox@0.4.30
+- @gradio/client@1.19.0
+- @gradio/upload@0.17.0
+- @gradio/button@0.5.13
+
 ## 0.19.2
 
 ### Dependency updates

package/Index.svelte

@@ -16,7 +16,7 @@
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let value: DataframeValue = {
 		data: [["", "", ""]],
 		headers: ["1", "2", "3"],
@@ -41,6 +41,7 @@
 		input: never;
 		clear_status: LoadingStatus;
 		search: string | null;
+		edit: SelectData;
 	}>;
 	export let latex_delimiters: {
 		left: string;
@@ -95,6 +96,7 @@
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:edit={(e) => gradio.dispatch("edit", e.detail)}
 		on:fullscreen={({ detail }) => {
 			fullscreen = detail;
 		}}

package/dist/Index.svelte

@@ -78,6 +78,7 @@ export let fullscreen = false;
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:edit={(e) => gradio.dispatch("edit", e.detail)}
 		on:fullscreen={({ detail }) => {
 			fullscreen = detail;
 		}}

package/dist/Index.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
     props: {
         elem_id?: string;
         elem_classes?: string[];
-        visible?: boolean;
+        visible?: boolean | "hidden";
         value?: DataframeValue;
         value_is_output?: boolean;
         col_count: [number, "fixed" | "dynamic"];
@@ -28,6 +28,7 @@ declare const __propDef: {
             input: never;
             clear_status: LoadingStatus;
             search: string | null;
+            edit: SelectData;
         }>;
         latex_delimiters: {
             left: string;
@@ -63,9 +64,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get elem_classes(): string[] | undefined;
     /**accessor*/
     set elem_classes(_: string[] | undefined);
-    get visible(): boolean | undefined;
+    get visible(): boolean | "hidden" | undefined;
     /**accessor*/
-    set visible(_: boolean | undefined);
+    set visible(_: boolean | "hidden" | undefined);
     get value(): DataframeValue | undefined;
     /**accessor*/
     set value(_: DataframeValue | undefined);
@@ -111,6 +112,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         input: never;
         clear_status: LoadingStatus;
         search: string | null;
+        edit: SelectData;
     }>;
     /**accessor*/
     set gradio(_: Gradio<{
@@ -119,6 +121,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         input: never;
         clear_status: LoadingStatus;
         search: string | null;
+        edit: SelectData;
     }>);
     get latex_delimiters(): {
         left: string;

package/dist/shared/BooleanCell.svelte

@@ -2,7 +2,6 @@
 export let value = false;
 export let editable = true;
 export let on_change;
-$: bool_value = typeof value === "string" ? value.toLowerCase() === "true" : !!value;
 function handle_change(event) {
   if (editable) {
     on_change(event.detail);
@@ -12,7 +11,7 @@ function handle_change(event) {
 
 <div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
-		bind:value={bool_value}
+		bind:value
 		label=""
 		interactive={editable}
 		on:change={handle_change}

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: boolean | string;
+        value?: boolean;
         editable?: boolean;
         on_change: (value: boolean) => void;
     };

package/dist/shared/EditableCell.svelte

@@ -48,18 +48,11 @@ function handle_blur(event) {
 function handle_keydown(event) {
   dispatch("keydown", event);
 }
-function handle_bool_change(new_value) {
-  value = new_value.toString();
-  dispatch("blur", {
-    blur_event: {
-      target: {
-        type: "checkbox",
-        checked: new_value,
-        value: new_value.toString()
-      }
-    },
-    coords
-  });
+function commit_change(checked) {
+  handle_blur({ target: { value } });
+}
+$: if (!edit) {
+  handle_blur({ target: { value } });
 }
 </script>
 
@@ -80,12 +73,8 @@ function handle_bool_change(new_value) {
 	/>
 {/if}
 
-{#if datatype === "bool"}
-	<BooleanCell
-		value={String(display_content)}
-		{editable}
-		on_change={handle_bool_change}
-	/>
+{#if datatype === "bool" && typeof value === "boolean"}
+	<BooleanCell bind:value {editable} on_change={commit_change} />
 {:else}
 	<span
 		class:dragging={is_dragging}

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
+import type { CellValue } from "./types";
 declare const __propDef: {
     props: {
         edit: boolean;
-        value?: string | number;
+        value?: CellValue;
         display_value?: string | null;
         styling?: string;
         header?: boolean;

package/dist/shared/Table.svelte

@@ -28,7 +28,6 @@ import {
   handle_file_upload
 } from "./utils/table_utils";
 import { make_headers, process_data } from "./utils/data_processing";
-import { cast_value_to_type } from "./utils/utils";
 import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 import {
   create_drag_handlers
@@ -180,7 +179,8 @@ $: if (!dequal(values, old_val)) {
     els,
     data_binding,
     make_id,
-    display_value
+    display_value,
+    datatype
   );
   old_val = JSON.parse(JSON.stringify(values));
   if (is_reset || is_different_structure) {
@@ -235,26 +235,18 @@ $: if ($df_state.current_search_query !== void 0) {
   filtered_to_original_map = [];
 }
 let previous_headers = _headers.map((h) => h.value);
-let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+let previous_data = data.map((row) => row.map((cell) => cell.value));
 $: {
   if (data || _headers) {
     df_actions.trigger_change(
-      data.map(
-        (row, rowIdx) => row.map((cell, colIdx) => {
-          const dtype = Array.isArray(datatype) ? datatype[colIdx] : datatype;
-          return {
-            ...cell,
-            value: cast_value_to_type(cell.value, dtype)
-          };
-        })
-      ),
+      data,
       _headers,
       previous_data,
       previous_headers,
       value_is_output,
       dispatch
     );
-    previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+    previous_data = data.map((row) => row.map((cell) => cell.value));
     previous_headers = _headers.map((h) => h.value);
   }
 }
@@ -572,6 +564,18 @@ function add_col_at(index, position) {
 export function reset_sort_state() {
   df_actions.reset_sort_state();
 }
+function handle_select_all(col, checked) {
+  data = data.map((row) => {
+    const new_row = [...row];
+    if (new_row[col]) {
+      new_row[col] = {
+        ...new_row[col],
+        value: checked.toString()
+      };
+    }
+    return new_row;
+  });
+}
 let is_dragging = false;
 let drag_start = null;
 let mouse_down_pos = null;
@@ -683,6 +687,9 @@ function get_cell_display_value(row, col) {
 							{i18n}
 							bind:el={els[id].input}
 							{col_count}
+							datatype={Array.isArray(datatype) ? datatype[i] : datatype}
+							{data}
+							on_select_all={handle_select_all}
 						/>
 					{/each}
 				</tr>
@@ -786,6 +793,9 @@ function get_cell_display_value(row, col) {
 								{i18n}
 								bind:el={els[id].input}
 								{col_count}
+								datatype={Array.isArray(datatype) ? datatype[i] : datatype}
+								{data}
+								on_select_all={handle_select_all}
 							/>
 						{/each}
 					</tr>

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

@@ -2,14 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import { type Client } from "@gradio/client";
-import type { Headers, DataframeValue, Datatype } from "./utils/utils";
+import type { Headers, DataframeValue, Datatype, EditData } from "./utils/utils";
+import type { CellValue } from "./types";
 declare const __propDef: {
     props: {
         datatype: Datatype | Datatype[];
         label?: string | null;
         show_label?: boolean;
         headers?: Headers;
-        values?: (string | number)[][];
+        values?: CellValue[][];
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
         latex_delimiters: {
@@ -46,6 +47,7 @@ declare const __propDef: {
         input: CustomEvent<undefined>;
         select: CustomEvent<SelectData>;
         search: CustomEvent<string | null>;
+        edit: CustomEvent<EditData>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import type { Datatype } from "./utils/utils";
+import type { CellValue } from "./types";
 declare const __propDef: {
     props: {
-        value: string | number;
+        value: CellValue;
         index: number;
         j: number;
         actual_pinned_columns: number;

package/dist/shared/TableHeader.svelte

@@ -5,8 +5,10 @@ import Padlock from "./icons/Padlock.svelte";
 import SortArrowUp from "./icons/SortArrowUp.svelte";
 import SortArrowDown from "./icons/SortArrowDown.svelte";
 import CellMenuIcons from "./CellMenuIcons.svelte";
+import { BaseCheckbox } from "@gradio/checkbox";
 export let value;
 export let i;
+export let datatype = "str";
 export let actual_pinned_columns;
 export let header_edit;
 export let selected_header;
@@ -25,7 +27,19 @@ export let i18n;
 export let el;
 export let is_static;
 export let col_count;
+export let data = [];
+export let on_select_all = void 0;
 $: can_add_columns = col_count && col_count[1] === "dynamic";
+$: is_bool_column = datatype === "bool";
+$: select_all_state = (() => {
+  if (!is_bool_column || data.length === 0) return "unchecked";
+  const true_count = data.filter(
+    (row) => row[i]?.value === true || row[i]?.value === "true"
+  ).length;
+  if (true_count === 0) return "unchecked";
+  if (true_count === data.length) return "checked";
+  return "indeterminate";
+})();
 $: 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;
@@ -65,6 +79,33 @@ function get_header_position(col_index) {
 >
 	<div class="cell-wrap">
 		<div class="header-content">
+			{#if is_bool_column && editable && on_select_all}
+				<div
+					class="select-all-checkbox"
+					role="button"
+					tabindex="0"
+					on:click|stopPropagation
+					on:keydown|stopPropagation={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+						}
+					}}
+					on:mousedown|stopPropagation
+				>
+					<BaseCheckbox
+						value={select_all_state === "checked"}
+						indeterminate={select_all_state === "indeterminate"}
+						label=""
+						interactive={true}
+						on:select={() => {
+							if (on_select_all) {
+								const new_value = select_all_state !== "checked";
+								on_select_all(i, new_value);
+							}
+						}}
+					/>
+				</div>
+			{/if}
 			<button
 				class="header-button"
 				on:click={(event) => handle_header_click(event, i)}
@@ -256,4 +297,20 @@ function get_header_position(col_index) {
 		z-index: 5;
 		border-right: none;
 	}
+
+	.select-all-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: var(--size-1);
+		flex-shrink: 0;
+	}
+
+	.select-all-checkbox :global(label) {
+		margin: 0;
+	}
+
+	.select-all-checkbox :global(span) {
+		display: none;
+	}
 </style>

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

@@ -2,10 +2,12 @@ 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";
+import type { Datatype } from "./utils/utils";
 declare const __propDef: {
     props: {
         value: string;
         i: number;
+        datatype?: Datatype;
         actual_pinned_columns: number;
         header_edit: number | false;
         selected_header: number | false;
@@ -36,8 +38,13 @@ declare const __propDef: {
         el: HTMLTextAreaElement | null;
         is_static: boolean;
         col_count: [number, "fixed" | "dynamic"];
+        data?: any[];
+        on_select_all?: ((col: number, checked: boolean) => void) | undefined;
     };
     events: {
+        click: MouseEvent;
+        mousedown: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
+import type { CellValue } from "../types";
 import { get_next_cell_coordinates, get_range_selection, move_cursor } from "../utils/selection_utils";
 export declare const DATAFRAME_KEY: unique symbol;
 export type SortDirection = "asc" | "desc";
@@ -18,7 +19,7 @@ interface DataFrameState {
         max_height: number;
         column_widths: string[];
         max_chars?: number;
-        static_columns?: (string | number)[];
+        static_columns?: CellValue[];
     };
     current_search_query: string | null;
     sort_state: {
@@ -30,7 +31,7 @@ interface DataFrameState {
         initial_data: {
             data: {
                 id: string;
-                value: string | number;
+                value: CellValue;
             }[][];
             display_value: string[][] | null;
             styling: string[][] | null;
@@ -46,7 +47,7 @@ interface DataFrameState {
         initial_data: {
             data: {
                 id: string;
-                value: string | number;
+                value: CellValue;
             }[][];
             display_value: string[][] | null;
             styling: string[][] | null;
@@ -105,7 +106,7 @@ interface DataFrameActions {
         data: any[][];
         headers: string[];
     };
-    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>;
+    trigger_change: (data: any[][], headers: any[], previous_data: any[][], previous_headers: string[], value_is_output: boolean, dispatch: (e: "change" | "input" | "edit", detail?: any) => void) => Promise<void>;
     reset_sort_state: () => void;
     reset_filter_state: () => void;
     set_active_cell_menu: (menu: {
@@ -169,10 +170,10 @@ export interface DataFrameContext {
         input: HTMLTextAreaElement | null;
     }>;
     parent_element?: HTMLElement;
-    get_data_at?: (row: number, col: number) => string | number;
-    get_column?: (col: number) => (string | number)[];
-    get_row?: (row: number) => (string | number)[];
-    dispatch?: (e: "change" | "select" | "search", detail?: any) => void;
+    get_data_at?: (row: number, col: number) => CellValue;
+    get_column?: (col: number) => CellValue[];
+    get_row?: (row: number) => CellValue[];
+    dispatch?: (e: "change" | "select" | "search" | "edit", detail?: any) => void;
 }
 export declare function create_dataframe_context(config: DataFrameState["config"]): DataFrameContext;
 export declare function get_dataframe_context(): DataFrameContext;

package/dist/shared/context/dataframe_context.js

@@ -152,7 +152,7 @@ function create_actions(state, context) {
             if (s.current_search_query)
                 return;
             const current_headers = headers.map((h) => h.value);
-            const current_data = data.map((row) => row.map((cell) => String(cell.value)));
+            const current_data = data.map((row) => row.map((cell) => cell.value));
             if (!dequal(current_data, previous_data) ||
                 !dequal(current_headers, previous_headers)) {
                 if (!dequal(current_headers, previous_headers)) {
@@ -166,6 +166,14 @@ function create_actions(state, context) {
                     headers: current_headers,
                     metadata: null
                 });
+                const index = s.ui_state.selected;
+                if (index) {
+                    dispatch("edit", {
+                        index,
+                        value: data[index[0]][index[1]].value,
+                        previous_value: previous_data[index[0]][index[1]]
+                    });
+                }
                 if (!value_is_output)
                     dispatch("input");
             }

package/dist/shared/types.d.ts

@@ -5,9 +5,10 @@ export interface HeadersWithIDs {
     id: string;
     value: string;
 }
+export type CellValue = string | number | boolean;
 export interface TableCell {
     id: string;
-    value: string | number;
+    value: CellValue;
 }
 export type TableData = TableCell[][];
 export type CountConfig = [number, "fixed" | "dynamic"];

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

@@ -1,13 +1,14 @@
-import type { Headers, HeadersWithIDs } from "./utils";
+import type { Datatype, Headers, HeadersWithIDs } from "./utils";
+import type { CellValue } from "../types";
 export declare function make_headers(_head: Headers, col_count: [number, "fixed" | "dynamic"], els: Record<string, {
     cell: null | HTMLTableCellElement;
     input: null | HTMLTextAreaElement;
 }>, make_id: () => string): HeadersWithIDs;
-export declare function process_data(values: (string | number)[][], els: Record<string, {
+export declare function process_data(values: CellValue[][], els: Record<string, {
     cell: null | HTMLTableCellElement;
     input: null | HTMLTextAreaElement;
-}>, data_binding: Record<string, any>, make_id: () => string, display_value?: string[][] | null): {
+}>, data_binding: Record<string, any>, make_id: () => string, display_value: (string[][] | null) | undefined, datatype: Datatype | Datatype[]): {
     id: string;
-    value: string | number;
+    value: CellValue;
     display_value?: string;
 }[][];

package/dist/shared/utils/data_processing.js

@@ -1,3 +1,4 @@
+import { cast_value_to_type } from "./utils";
 export function make_headers(_head, col_count, els, make_id) {
     let _h = _head || [];
     if (col_count[1] === "fixed" && _h.length < col_count[0]) {
@@ -21,7 +22,7 @@ export function make_headers(_head, col_count, els, make_id) {
         return { id: _id, value: h ?? "" };
     });
 }
-export function process_data(values, els, data_binding, make_id, display_value = null) {
+export function process_data(values, els, data_binding, make_id, display_value = null, datatype) {
     if (!values || values.length === 0) {
         return [];
     }
@@ -34,9 +35,10 @@ export function process_data(values, els, data_binding, make_id, display_value =
             if (display === undefined) {
                 display = String(value);
             }
+            const dtype = Array.isArray(datatype) ? datatype[j] : datatype;
             return {
                 id: _id,
-                value,
+                value: cast_value_to_type(value, dtype),
                 display_value: display
             };
         });

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

@@ -1,7 +1,8 @@
+import type { CellValue } from "../types";
 export type FilterDatatype = "string" | "number";
 export declare function filter_data(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], filter_columns: {
     col: number;
     datatype: FilterDatatype;
@@ -10,7 +11,7 @@ export declare function filter_data(data: {
 }[]): number[];
 export declare function filter_data_and_preserve_selection(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], display_value: string[][] | null, styling: string[][] | null, filter_columns: {
     col: number;
     datatype: FilterDatatype;
@@ -18,10 +19,10 @@ export declare function filter_data_and_preserve_selection(data: {
     value: string;
 }[], selected: [number, number] | false, get_current_indices: (id: string, data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][]) => [number, number], original_data?: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], original_display_value?: string[][] | null, original_styling?: string[][] | null): {
     data: typeof data;
     selected: [number, number] | false;

package/dist/shared/utils/keyboard_utils.js

@@ -26,7 +26,7 @@ export async function handle_cell_blur(event, ctx, coords) {
     const input_el = event.target;
     if (!input_el || input_el.value === undefined)
         return;
-    await save_cell_value(input_el.type === "checkbox" ? String(input_el.checked) : input_el.value, ctx, coords[0], coords[1]);
+    await save_cell_value(input_el.value, ctx, coords[0], coords[1]);
 }
 function handle_header_navigation(event, ctx) {
     const state = get(ctx.state);

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

@@ -1,7 +1,7 @@
-import type { CellCoordinate } from "./../types";
+import type { CellCoordinate, CellValue } from "./../types";
 export type CellData = {
     id: string;
-    value: string | number;
+    value: CellValue;
 };
 export declare function is_cell_in_selection(coords: [number, number], selected_cells: [number, number][]): boolean;
 export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
@@ -21,7 +21,7 @@ export declare function select_column(data: any[][], col: number): CellCoordinat
 export declare function select_row(data: any[][], row: number): CellCoordinate[];
 export declare function calculate_selection_positions(selected: CellCoordinate, data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], els: Record<string, {
     cell: HTMLTableCellElement | null;
 }>, parent: HTMLElement, table: HTMLElement): {

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

@@ -1,4 +1,4 @@
-import type { Headers } from "../types";
+import type { Headers, CellValue } from "../types";
 export type SortDirection = "asc" | "desc";
 export declare function get_sort_status(name: string, sort_columns: {
     col: number;
@@ -6,20 +6,20 @@ export declare function get_sort_status(name: string, sort_columns: {
 }[], headers: Headers): "none" | "asc" | "desc";
 export declare function sort_data(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], sort_columns: {
     col: number;
     direction: SortDirection;
 }[]): number[];
 export declare function sort_data_and_preserve_selection(data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][], display_value: string[][] | null, styling: string[][] | null, sort_columns: {
     col: number;
     direction: SortDirection;
 }[], selected: [number, number] | false, get_current_indices: (id: string, data: {
     id: string;
-    value: string | number;
+    value: CellValue;
 }[][]) => [number, number]): {
     data: typeof data;
     selected: [number, number] | false;