@gradio/dataframe 0.17.14 → 0.17.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gradio/dataframe
 
+## 0.17.15
+
+### Features
+
+- [#11237](https://github.com/gradio-app/gradio/pull/11237) [`a6f6b40`](https://github.com/gradio-app/gradio/commit/a6f6b40dda5194fa5bc9926ef67f2a75f503e9a4) - Enhance boolean cell types in `gr.Dataframe`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.16.7
+- @gradio/checkbox@0.4.23
+- @gradio/client@1.15.2
+- @gradio/button@0.5.3
+
 ## 0.17.14
 
 ### Fixes

package/Dataframe.stories.svelte

@@ -60,11 +60,12 @@
 	name="Interactive dataframe with label"
 	args={{
 		values: [
-			["Cat", 5],
-			["Horse", 3],
-			["Snake", 1]
+			["Cat", 5, true],
+			["Horse", 3, false],
+			["Snake", 1, false]
 		],
-		headers: ["Animal", "Votes"],
+		headers: ["Animal", "Votes", "Is Pet"],
+		datatype: ["str", "number", "bool"],
 		label: "Animals",
 		show_label: true,
 		col_count: [2, "dynamic"],
@@ -93,14 +94,14 @@
 	name="Static dataframe"
 	args={{
 		values: [
-			["Cat", 5],
-			["Horse", 3],
-			["Snake", 1]
+			["Cat", 5, true],
+			["Horse", 3, false],
+			["Snake", 1, false]
 		],
-		headers: ["Animal", "Votes"],
-
+		headers: ["Animal", "Votes", "Is Pet"],
+		datatype: ["str", "number", "bool"],
 		label: "Animals",
-		col_count: [2, "dynamic"],
+		col_count: [3, "dynamic"],
 		row_count: [3, "dynamic"],
 		editable: false
 	}}

package/dist/shared/BooleanCell.svelte

@@ -0,0 +1,62 @@
+<script>import { BaseCheckbox } from "@gradio/checkbox";
+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) {
+  on_change(event.detail);
+}
+function handle_click(event) {
+  event.stopPropagation();
+}
+function handle_keydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.stopPropagation();
+  }
+}
+</script>
+
+<div
+	class="bool-cell checkbox"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	role="button"
+	tabindex="-1"
+>
+	<BaseCheckbox
+		bind:value={bool_value}
+		label=""
+		interactive={editable}
+		on:change={handle_change}
+	/>
+</div>
+
+<style>
+	.bool-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.bool-cell :global(input:disabled) {
+		opacity: 0.8;
+	}
+
+	.bool-cell.checkbox {
+		justify-content: center;
+	}
+
+	.bool-cell :global(label) {
+		margin: 0;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.bool-cell :global(span) {
+		display: none;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: (boolean | string) | undefined;
+        editable?: boolean | undefined;
+        on_change: (value: boolean) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BooleanCellProps = typeof __propDef.props;
+export type BooleanCellEvents = typeof __propDef.events;
+export type BooleanCellSlots = typeof __propDef.slots;
+export default class BooleanCell extends SvelteComponent<BooleanCellProps, BooleanCellEvents, BooleanCellSlots> {
+}
+export {};

package/dist/shared/EditableCell.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import { MarkdownCode } from "@gradio/markdown-code";
 import SelectionButtons from "./icons/SelectionButtons.svelte";
+import BooleanCell from "./BooleanCell.svelte";
 export let edit;
 export let value = "";
 export let display_value = null;
@@ -21,9 +22,9 @@ export let show_selection_buttons = false;
 export let coords;
 export let on_select_column = null;
 export let on_select_row = null;
+export let el;
 const dispatch = createEventDispatcher();
 let is_expanded = false;
-export let el;
 function truncate_text(text, max_length = null, is_image = false) {
   if (is_image)
     return String(text);
@@ -65,9 +66,22 @@ function handle_click() {
     is_expanded = !is_expanded;
   }
 }
+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
+  });
+}
 </script>
 
-{#if edit}
+{#if edit && datatype !== "bool"}
 	<input
 		readonly={is_static}
 		aria-readonly={is_static}
@@ -86,48 +100,57 @@ function handle_click() {
 	/>
 {/if}
 
-<span
-	class:dragging={is_dragging}
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	tabindex="0"
-	role="button"
-	class:edit
-	class:expanded={is_expanded}
-	class:multiline={header}
-	on:focus|preventDefault
-	style={styling}
-	data-editable={editable}
-	data-max-chars={max_chars}
-	data-expanded={is_expanded}
-	placeholder=" "
-	class:text={datatype === "str"}
-	class:wrap={wrap_text}
->
-	{#if datatype === "image" && components.image}
-		<svelte:component
-			this={components.image}
-			value={{ url: display_text }}
-			show_label={false}
-			label="cell-image"
-			show_download_button={false}
-			{i18n}
-			gradio={{ dispatch: () => {} }}
-		/>
-	{:else if datatype === "html"}
-		{@html display_text}
-	{:else if datatype === "markdown"}
-		<MarkdownCode
-			message={display_text.toLocaleString()}
-			{latex_delimiters}
-			{line_breaks}
-			chatbot={false}
-			{root}
-		/>
-	{:else}
-		{display_text}
-	{/if}
-</span>
+{#if datatype === "bool"}
+	<BooleanCell
+		value={String(display_content)}
+		{editable}
+		on_change={handle_bool_change}
+	/>
+{:else}
+	<span
+		class:dragging={is_dragging}
+		on:click={handle_click}
+		on:keydown={handle_keydown}
+		tabindex="0"
+		role="button"
+		class:edit
+		class:expanded={is_expanded}
+		class:multiline={header}
+		on:focus|preventDefault
+		style={styling}
+		data-editable={editable}
+		data-max-chars={max_chars}
+		data-expanded={is_expanded}
+		placeholder=" "
+		class:text={datatype === "str"}
+		class:wrap={wrap_text}
+	>
+		{#if datatype === "image" && components.image}
+			<svelte:component
+				this={components.image}
+				value={{ url: display_text }}
+				show_label={false}
+				label="cell-image"
+				show_download_button={false}
+				{i18n}
+				gradio={{ dispatch: () => {} }}
+			/>
+		{:else if datatype === "html"}
+			{@html display_text}
+		{:else if datatype === "markdown"}
+			<MarkdownCode
+				message={display_text.toLocaleString()}
+				{latex_delimiters}
+				{line_breaks}
+				chatbot={false}
+				{root}
+			/>
+		{:else}
+			{display_text}
+		{/if}
+	</span>
+{/if}
+
 {#if show_selection_buttons && coords && on_select_column && on_select_row}
 	<SelectionButtons
 		position="column"

package/dist/shared/Table.svelte

@@ -103,7 +103,7 @@ onMount(() => {
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting && !is_visible) {
-        set_cell_widths();
+        width_calculated = false;
       }
       is_visible = entry.isIntersecting;
     });
@@ -111,10 +111,17 @@ onMount(() => {
   observer.observe(parent);
   document.addEventListener("click", handle_click_outside);
   window.addEventListener("resize", handle_resize);
+  const global_mouse_up = (event) => {
+    if (is_dragging || drag_start) {
+      handle_mouse_up(event);
+    }
+  };
+  document.addEventListener("mouseup", global_mouse_up);
   return () => {
     observer.disconnect();
     document.removeEventListener("click", handle_click_outside);
     window.removeEventListener("resize", handle_resize);
+    document.removeEventListener("mouseup", global_mouse_up);
   };
 });
 $: {
@@ -170,6 +177,7 @@ $:
         }
         last_width_data_length = 0;
         last_width_column_count = 0;
+        width_calculated = false;
       }
     }
     const is_reset = values.length === 0 || values.length === 1 && values[0].length === 0;
@@ -193,8 +201,8 @@ $:
     if ($df_state.current_search_query) {
       df_actions.handle_search(null);
     }
-    if (parent && cells.length > 0) {
-      set_cell_widths();
+    if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+      width_calculated = false;
     }
   }
 $:
@@ -328,8 +336,18 @@ function handle_click_outside(event) {
 }
 $:
   max = get_max(data);
+let width_calc_timeout;
 $:
-  cells[0] && cells[0]?.clientWidth && set_cell_widths();
+  if (cells[0] && cells[0]?.clientWidth) {
+    clearTimeout(width_calc_timeout);
+    width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
+  }
+let width_calculated = false;
+$:
+  if (cells[0] && !width_calculated) {
+    set_cell_widths();
+    width_calculated = true;
+  }
 let cells = [];
 let parent;
 let table;
@@ -512,6 +530,7 @@ function handle_resize() {
   selected_cells = [];
   selected = false;
   editing = false;
+  width_calculated = false;
   set_cell_widths();
 }
 function add_row_at(index, position) {

package/dist/shared/utils/drag_utils.js

@@ -43,6 +43,10 @@ export function create_drag_handlers(state, set_is_dragging, set_selected_cells,
         handle_mouse_move(event) {
             if (!state.drag_start || !state.mouse_down_pos)
                 return;
+            if (!(event.buttons & 1)) {
+                end_drag(event);
+                return;
+            }
             const dx = Math.abs(event.clientX - state.mouse_down_pos.x);
             const dy = Math.abs(event.clientY - state.mouse_down_pos.y);
             if (!state.is_dragging && (dx > 3 || dy > 3)) {

package/dist/shared/utils/keyboard_utils.js

@@ -23,7 +23,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.value, ctx, coords[0], coords[1]);
+    await save_cell_value(input_el.type === "checkbox" ? String(input_el.checked) : input_el.value, ctx, coords[0], coords[1]);
 }
 function handle_header_navigation(event, ctx) {
     const state = get(ctx.state);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.14",
+  "version": "0.17.15",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,15 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
+    "@gradio/button": "^0.5.3",
     "@gradio/atoms": "^0.16.1",
-    "@gradio/button": "^0.5.2",
-    "@gradio/client": "^1.15.1",
+    "@gradio/checkbox": "^0.4.23",
+    "@gradio/client": "^1.15.2",
     "@gradio/icons": "^0.12.0",
-    "@gradio/markdown-code": "^0.4.3",
-    "@gradio/upload": "^0.16.6",
     "@gradio/statustracker": "^0.10.12",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/upload": "^0.16.7",
+    "@gradio/utils": "^0.10.2",
+    "@gradio/markdown-code": "^0.4.3"
   },
   "exports": {
     ".": {

package/shared/BooleanCell.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { BaseCheckbox } from "@gradio/checkbox";
+
+	export let value: boolean | string = false;
+	export let editable = true;
+	export let on_change: (value: boolean) => void;
+
+	$: bool_value =
+		typeof value === "string" ? value.toLowerCase() === "true" : !!value;
+
+	function handle_change(event: CustomEvent<boolean>): void {
+		on_change(event.detail);
+	}
+
+	function handle_click(event: MouseEvent): void {
+		event.stopPropagation();
+	}
+
+	function handle_keydown(event: KeyboardEvent): void {
+		if (event.key === "Enter" || event.key === " ") {
+			event.stopPropagation();
+		}
+	}
+</script>
+
+<div
+	class="bool-cell checkbox"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	role="button"
+	tabindex="-1"
+>
+	<BaseCheckbox
+		bind:value={bool_value}
+		label=""
+		interactive={editable}
+		on:change={handle_change}
+	/>
+</div>
+
+<style>
+	.bool-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.bool-cell :global(input:disabled) {
+		opacity: 0.8;
+	}
+
+	.bool-cell.checkbox {
+		justify-content: center;
+	}
+
+	.bool-cell :global(label) {
+		margin: 0;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.bool-cell :global(span) {
+		display: none;
+	}
+</style>

package/shared/EditableCell.svelte

@@ -3,6 +3,8 @@
 	import { MarkdownCode } from "@gradio/markdown-code";
 	import type { I18nFormatter } from "@gradio/utils";
 	import SelectionButtons from "./icons/SelectionButtons.svelte";
+	import BooleanCell from "./BooleanCell.svelte";
+
 	export let edit: boolean;
 	export let value: string | number = "";
 	export let display_value: string | null = null;
@@ -35,6 +37,7 @@
 	export let coords: [number, number];
 	export let on_select_column: ((col: number) => void) | null = null;
 	export let on_select_row: ((row: number) => void) | null = null;
+	export let el: HTMLInputElement | null;
 
 	const dispatch = createEventDispatcher<{
 		blur: { blur_event: FocusEvent; coords: [number, number] };
@@ -43,8 +46,6 @@
 
 	let is_expanded = false;
 
-	export let el: HTMLInputElement | null;
-
 	function truncate_text(
 		text: string | number,
 		max_length: number | null = null,
@@ -99,9 +100,23 @@
 			is_expanded = !is_expanded;
 		}
 	}
+
+	function handle_bool_change(new_value: boolean): void {
+		value = new_value.toString();
+		dispatch("blur", {
+			blur_event: {
+				target: {
+					type: "checkbox",
+					checked: new_value,
+					value: new_value.toString()
+				}
+			} as unknown as FocusEvent,
+			coords: coords
+		});
+	}
 </script>
 
-{#if edit}
+{#if edit && datatype !== "bool"}
 	<input
 		readonly={is_static}
 		aria-readonly={is_static}
@@ -120,48 +135,57 @@
 	/>
 {/if}
 
-<span
-	class:dragging={is_dragging}
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	tabindex="0"
-	role="button"
-	class:edit
-	class:expanded={is_expanded}
-	class:multiline={header}
-	on:focus|preventDefault
-	style={styling}
-	data-editable={editable}
-	data-max-chars={max_chars}
-	data-expanded={is_expanded}
-	placeholder=" "
-	class:text={datatype === "str"}
-	class:wrap={wrap_text}
->
-	{#if datatype === "image" && components.image}
-		<svelte:component
-			this={components.image}
-			value={{ url: display_text }}
-			show_label={false}
-			label="cell-image"
-			show_download_button={false}
-			{i18n}
-			gradio={{ dispatch: () => {} }}
-		/>
-	{:else if datatype === "html"}
-		{@html display_text}
-	{:else if datatype === "markdown"}
-		<MarkdownCode
-			message={display_text.toLocaleString()}
-			{latex_delimiters}
-			{line_breaks}
-			chatbot={false}
-			{root}
-		/>
-	{:else}
-		{display_text}
-	{/if}
-</span>
+{#if datatype === "bool"}
+	<BooleanCell
+		value={String(display_content)}
+		{editable}
+		on_change={handle_bool_change}
+	/>
+{:else}
+	<span
+		class:dragging={is_dragging}
+		on:click={handle_click}
+		on:keydown={handle_keydown}
+		tabindex="0"
+		role="button"
+		class:edit
+		class:expanded={is_expanded}
+		class:multiline={header}
+		on:focus|preventDefault
+		style={styling}
+		data-editable={editable}
+		data-max-chars={max_chars}
+		data-expanded={is_expanded}
+		placeholder=" "
+		class:text={datatype === "str"}
+		class:wrap={wrap_text}
+	>
+		{#if datatype === "image" && components.image}
+			<svelte:component
+				this={components.image}
+				value={{ url: display_text }}
+				show_label={false}
+				label="cell-image"
+				show_download_button={false}
+				{i18n}
+				gradio={{ dispatch: () => {} }}
+			/>
+		{:else if datatype === "html"}
+			{@html display_text}
+		{:else if datatype === "markdown"}
+			<MarkdownCode
+				message={display_text.toLocaleString()}
+				{latex_delimiters}
+				{line_breaks}
+				chatbot={false}
+				{root}
+			/>
+		{:else}
+			{display_text}
+		{/if}
+	</span>
+{/if}
+
 {#if show_selection_buttons && coords && on_select_column && on_select_row}
 	<SelectionButtons
 		position="column"

package/shared/Table.svelte

@@ -120,7 +120,7 @@
 		const observer = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting && !is_visible) {
-					set_cell_widths();
+					width_calculated = false;
 				}
 				is_visible = entry.isIntersecting;
 			});
@@ -129,10 +129,18 @@
 		document.addEventListener("click", handle_click_outside);
 		window.addEventListener("resize", handle_resize);
 
+		const global_mouse_up = (event: MouseEvent): void => {
+			if (is_dragging || drag_start) {
+				handle_mouse_up(event);
+			}
+		};
+		document.addEventListener("mouseup", global_mouse_up);
+
 		return () => {
 			observer.disconnect();
 			document.removeEventListener("click", handle_click_outside);
 			window.removeEventListener("resize", handle_resize);
+			document.removeEventListener("mouseup", global_mouse_up);
 		};
 	});
 
@@ -223,6 +231,7 @@
 				}
 				last_width_data_length = 0;
 				last_width_column_count = 0;
+				width_calculated = false;
 			}
 		}
 
@@ -256,8 +265,8 @@
 			df_actions.handle_search(null);
 		}
 
-		if (parent && cells.length > 0) {
-			set_cell_widths();
+		if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+			width_calculated = false;
 		}
 	}
 
@@ -421,9 +430,17 @@
 
 	$: max = get_max(data);
 
-	// Modify how we trigger cell width calculations
-	// Only recalculate when cells actually change, not during sort
-	$: cells[0] && cells[0]?.clientWidth && set_cell_widths();
+	let width_calc_timeout: ReturnType<typeof setTimeout>;
+	$: if (cells[0] && cells[0]?.clientWidth) {
+		clearTimeout(width_calc_timeout);
+		width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
+	}
+
+	let width_calculated = false;
+	$: if (cells[0] && !width_calculated) {
+		set_cell_widths();
+		width_calculated = true;
+	}
 	let cells: HTMLTableCellElement[] = [];
 	let parent: HTMLDivElement;
 	let table: HTMLTableElement;
@@ -649,6 +666,7 @@
 		selected_cells = [];
 		selected = false;
 		editing = false;
+		width_calculated = false;
 		set_cell_widths();
 	}
 

package/shared/utils/drag_utils.ts

@@ -75,6 +75,11 @@ export function create_drag_handlers(
 		handle_mouse_move(event: MouseEvent): void {
 			if (!state.drag_start || !state.mouse_down_pos) return;
 
+			if (!(event.buttons & 1)) {
+				end_drag(event);
+				return;
+			}
+
 			const dx = Math.abs(event.clientX - state.mouse_down_pos.x);
 			const dy = Math.abs(event.clientY - state.mouse_down_pos.y);
 

package/shared/utils/keyboard_utils.ts

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