@gradio/dataframe 0.19.2 → 0.19.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/dataframe
 
+## 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"],

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"];
@@ -63,9 +63,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);

package/dist/shared/Table.svelte

@@ -572,6 +572,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 +695,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 +801,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.19.2",
+  "version": "0.19.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,14 +13,14 @@
     "@types/katex": "^0.16.0",
     "d3-dsv": "^3.0.1",
     "dequal": "^2.0.2",
-    "@gradio/button": "^0.5.12",
-    "@gradio/checkbox": "^0.4.29",
-    "@gradio/atoms": "^0.17.0",
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/button": "^0.5.13",
     "@gradio/icons": "^0.14.0",
+    "@gradio/statustracker": "^0.11.1",
+    "@gradio/checkbox": "^0.4.30",
     "@gradio/markdown-code": "^0.5.1",
-    "@gradio/statustracker": "^0.11.0",
-    "@gradio/upload": "^0.16.17",
-    "@gradio/client": "^1.18.0",
+    "@gradio/upload": "^0.17.0",
+    "@gradio/client": "^1.19.0",
     "@gradio/utils": "^0.10.2"
   },
   "exports": {

package/shared/Table.svelte

@@ -755,6 +755,19 @@
 		df_actions.reset_sort_state();
 	}
 
+	function handle_select_all(col: number, checked: boolean): void {
+		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: [number, number] | null = null;
 	let mouse_down_pos: { x: number; y: number } | null = null;
@@ -877,6 +890,9 @@
 							{i18n}
 							bind:el={els[id].input}
 							{col_count}
+							datatype={Array.isArray(datatype) ? datatype[i] : datatype}
+							{data}
+							on_select_all={handle_select_all}
 						/>
 					{/each}
 				</tr>
@@ -980,6 +996,9 @@
 								{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/shared/TableHeader.svelte

@@ -9,8 +9,11 @@
 	import type { SortDirection } from "./context/dataframe_context";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { FilterDatatype } from "./context/dataframe_context";
+	import type { Datatype } from "./utils/utils";
+	import { BaseCheckbox } from "@gradio/checkbox";
 	export let value: string;
 	export let i: number;
+	export let datatype: Datatype = "str";
 	export let actual_pinned_columns: number;
 	export let header_edit: number | false;
 	export let selected_header: number | false;
@@ -39,8 +42,24 @@
 	export let el: HTMLTextAreaElement | null;
 	export let is_static: boolean;
 	export let col_count: [number, "fixed" | "dynamic"];
+	export let data: any[] = [];
+	export let on_select_all:
+		| ((col: number, checked: boolean) => void)
+		| undefined = undefined;
 
 	$: 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;
@@ -88,6 +107,33 @@
 >
 	<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)}
@@ -279,4 +325,20 @@
 		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>