@gradio/dataframe 0.18.2 → 0.18.4

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/dataframe
 
+## 0.18.4
+
+### Fixes
+
+- [#11559](https://github.com/gradio-app/gradio/pull/11559) [`dd9d8f1`](https://github.com/gradio-app/gradio/commit/dd9d8f1ed677e2d09a3061764c312f40133ab50d) - `gr.Dataframe` returns a `number` \ `bool` when the corresponding column is edited.  Thanks @janosch6!
+
+### Dependency updates
+
+- @gradio/upload@0.16.12
+- @gradio/client@1.15.7
+- @gradio/button@0.5.8
+
+## 0.18.3
+
+### Fixes
+
+- [#11534](https://github.com/gradio-app/gradio/pull/11534) [`5259f22`](https://github.com/gradio-app/gradio/commit/5259f229939177cc2027db5164c9321566fb3eeb) - Allow changing value with single click instead of double click.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/client@1.15.6
+- @gradio/statustracker@0.10.15
+- @gradio/button@0.5.7
+- @gradio/upload@0.16.11
+- @gradio/checkbox@0.4.26
+
 ## 0.18.2
 
 ### Fixes

package/dist/shared/BooleanCell.svelte

@@ -5,25 +5,13 @@ 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();
+  if (editable) {
+    on_change(event.detail);
   }
 }
 </script>
 
-<div
-	class="bool-cell checkbox"
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	role="button"
-	tabindex="-1"
->
+<div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
 		bind:value={bool_value}
 		label=""
@@ -37,15 +25,13 @@ function handle_keydown(event) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--size-full);
+		width: min-content;
 		height: var(--size-full);
-	}
-	.bool-cell :global(input:disabled) {
-		opacity: 0.8;
+		margin: 0 auto;
 	}
 
-	.bool-cell.checkbox {
-		justify-content: center;
+	.bool-cell :global(input:disabled) {
+		cursor: not-allowed;
 	}
 
 	.bool-cell :global(label) {

package/dist/shared/Table.svelte

@@ -28,6 +28,7 @@ import {
   handle_file_upload
 } from "./utils/table_utils";
 import { make_headers, process_data } from "./utils/data_processing";
+import { cast_value_to_type } from "./utils";
 import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 import {
   create_drag_handlers
@@ -249,7 +250,15 @@ let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
 $: {
   if (data || _headers) {
     df_actions.trigger_change(
-      data,
+      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)
+          };
+        })
+      ),
       _headers,
       previous_data,
       previous_headers,

package/dist/shared/utils/drag_utils.js

@@ -1,8 +1,13 @@
 import { get_range_selection } from "../selection_utils";
 export function create_drag_handlers(state, set_is_dragging, set_selected_cells, set_selected, handle_cell_click, show_row_numbers, parent_element) {
     const start_drag = (event, row, col) => {
+        const target = event.target;
+        const is_checkbox_click = target.type === "checkbox" ||
+            target.closest('input[type="checkbox"]') ||
+            target.closest(".bool-cell");
         if (event.target instanceof HTMLAnchorElement ||
-            (show_row_numbers && col === -1))
+            (show_row_numbers && col === -1) ||
+            is_checkbox_click)
             return;
         event.preventDefault();
         event.stopPropagation();

package/dist/shared/utils.d.ts

@@ -13,3 +13,10 @@ export type DataframeValue = {
     headers: Headers;
     metadata: Metadata;
 };
+/**
+ * Coerce a value to a given type.
+ * @param v - The value to coerce.
+ * @param t - The type to coerce to.
+ * @returns The coerced value.
+ */
+export declare function cast_value_to_type(v: any, t: Datatype): string | number | boolean;

package/dist/shared/utils.js

@@ -1 +1,29 @@
-export {};
+/**
+ * Coerce a value to a given type.
+ * @param v - The value to coerce.
+ * @param t - The type to coerce to.
+ * @returns The coerced value.
+ */
+export function cast_value_to_type(v, t) {
+    if (t === "number") {
+        const n = Number(v);
+        return isNaN(n) ? v : n;
+    }
+    if (t === "bool") {
+        if (typeof v === "boolean")
+            return v;
+        if (typeof v === "number")
+            return v !== 0;
+        const s = String(v).toLowerCase();
+        if (s === "true" || s === "1")
+            return true;
+        if (s === "false" || s === "0")
+            return false;
+        return v;
+    }
+    if (t === "date") {
+        const d = new Date(v);
+        return isNaN(d.getTime()) ? v : d.toISOString();
+    }
+    return v;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -18,14 +18,14 @@
     "katex": "^0.16.7",
     "marked": "^12.0.0",
     "@gradio/atoms": "^0.16.3",
-    "@gradio/checkbox": "^0.4.25",
-    "@gradio/button": "^0.5.6",
-    "@gradio/client": "^1.15.5",
+    "@gradio/checkbox": "^0.4.26",
+    "@gradio/button": "^0.5.8",
+    "@gradio/client": "^1.15.7",
     "@gradio/icons": "^0.12.0",
-    "@gradio/statustracker": "^0.10.14",
     "@gradio/markdown-code": "^0.5.0",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.10"
+    "@gradio/statustracker": "^0.10.15",
+    "@gradio/upload": "^0.16.12",
+    "@gradio/utils": "^0.10.2"
   },
   "exports": {
     ".": {

package/shared/BooleanCell.svelte

@@ -9,27 +9,13 @@
 		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();
+		if (editable) {
+			on_change(event.detail);
 		}
 	}
 </script>
 
-<div
-	class="bool-cell checkbox"
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	role="button"
-	tabindex="-1"
->
+<div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
 		bind:value={bool_value}
 		label=""
@@ -43,15 +29,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--size-full);
+		width: min-content;
 		height: var(--size-full);
-	}
-	.bool-cell :global(input:disabled) {
-		opacity: 0.8;
+		margin: 0 auto;
 	}
 
-	.bool-cell.checkbox {
-		justify-content: center;
+	.bool-cell :global(input:disabled) {
+		cursor: not-allowed;
 	}
 
 	.bool-cell :global(label) {

package/shared/Table.svelte

@@ -37,6 +37,7 @@
 		handle_file_upload
 	} from "./utils/table_utils";
 	import { make_headers, process_data } from "./utils/data_processing";
+	import { cast_value_to_type } from "./utils";
 	import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 	import {
 		create_drag_handlers,
@@ -330,7 +331,15 @@
 	$: {
 		if (data || _headers) {
 			df_actions.trigger_change(
-				data,
+				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)
+						};
+					})
+				),
 				_headers,
 				previous_data,
 				previous_headers,

package/shared/utils/drag_utils.ts

@@ -23,9 +23,16 @@ export function create_drag_handlers(
 	parent_element?: HTMLElement
 ): DragHandlers {
 	const start_drag = (event: MouseEvent, row: number, col: number): void => {
+		const target = event.target as HTMLElement;
+		const is_checkbox_click =
+			(target as HTMLInputElement).type === "checkbox" ||
+			target.closest('input[type="checkbox"]') ||
+			target.closest(".bool-cell");
+
 		if (
 			event.target instanceof HTMLAnchorElement ||
-			(show_row_numbers && col === -1)
+			(show_row_numbers && col === -1) ||
+			is_checkbox_click
 		)
 			return;
 

package/shared/utils.ts

@@ -10,3 +10,32 @@ export type DataframeValue = {
 	headers: Headers;
 	metadata: Metadata;
 };
+
+/**
+ * Coerce a value to a given type.
+ * @param v - The value to coerce.
+ * @param t - The type to coerce to.
+ * @returns The coerced value.
+ */
+export function cast_value_to_type(
+	v: any,
+	t: Datatype
+): string | number | boolean {
+	if (t === "number") {
+		const n = Number(v);
+		return isNaN(n) ? v : n;
+	}
+	if (t === "bool") {
+		if (typeof v === "boolean") return v;
+		if (typeof v === "number") return v !== 0;
+		const s = String(v).toLowerCase();
+		if (s === "true" || s === "1") return true;
+		if (s === "false" || s === "0") return false;
+		return v;
+	}
+	if (t === "date") {
+		const d = new Date(v);
+		return isNaN(d.getTime()) ? v : d.toISOString();
+	}
+	return v;
+}

package/test/table_utils.test.ts

@@ -1,6 +1,7 @@
 import { describe, test, expect } from "vitest";
 import { make_cell_id, make_header_id } from "../shared/utils/table_utils";
 import { process_data, make_headers } from "../shared/utils/data_processing";
+import { cast_value_to_type } from "../shared/utils";
 
 function make_id(): string {
 	return Math.random().toString(36).substring(2, 15);
@@ -133,3 +134,33 @@ describe("table_utils", () => {
 		});
 	});
 });
+
+describe("cast_value_to_type", () => {
+	test("casts to number", () => {
+		expect(cast_value_to_type("42", "number")).toBe(42);
+		expect(cast_value_to_type(3.14, "number")).toBe(3.14);
+		expect(cast_value_to_type("not a number", "number")).toBe("not a number");
+	});
+	test("casts to bool", () => {
+		expect(cast_value_to_type("True", "bool")).toBe(true);
+		expect(cast_value_to_type("False", "bool")).toBe(false);
+		expect(cast_value_to_type(1, "bool")).toBe(true);
+		expect(cast_value_to_type(0, "bool")).toBe(false);
+		expect(cast_value_to_type("1", "bool")).toBe(true);
+		expect(cast_value_to_type("0", "bool")).toBe(false);
+		expect(cast_value_to_type("yes", "bool")).toBe("yes");
+		expect(cast_value_to_type("no", "bool")).toBe("no");
+		expect(cast_value_to_type("on", "bool")).toBe("on");
+		expect(cast_value_to_type("off", "bool")).toBe("off");
+		expect(cast_value_to_type("random", "bool")).toBe("random");
+	});
+	test("casts to date", () => {
+		const result = cast_value_to_type("2023-01-01", "date");
+		expect(result).toBe("2023-01-01T00:00:00.000Z");
+		expect(typeof cast_value_to_type("not a date", "date")).toBe("string");
+	});
+	test("returns value as-is for str", () => {
+		expect(cast_value_to_type("hello", "str")).toBe("hello");
+		expect(cast_value_to_type(123, "str")).toBe(123);
+	});
+});