@gradio/dataframe 0.17.6 → 0.17.8

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/dataframe
 
+## 0.17.8
+
+### Fixes
+
+- [#11033](https://github.com/gradio-app/gradio/pull/11033) [`0dbc14f`](https://github.com/gradio-app/gradio/commit/0dbc14fa867ef57a2f810e0b869b7d13d98f2544) - Allow setting an empty value in `display_value` of `gr.Dataframe`.  Thanks @abidlabs!
+
+## 0.17.7
+
+### Fixes
+
+- [#11005](https://github.com/gradio-app/gradio/pull/11005) [`3def0ed`](https://github.com/gradio-app/gradio/commit/3def0ed9edc5a9194d69456948324ec4e2740b7d) - Ensure that the `.select()` event in `gr.DataFrame` carries the `.row_value` and `.col_value`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.9
+- @gradio/atoms@0.15.2
+- @gradio/client@1.14.2
+- @gradio/markdown-code@0.4.3
+- @gradio/utils@0.10.2
+- @gradio/button@0.4.15
+- @gradio/upload@0.16.2
+
 ## 0.17.6
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -763,14 +763,14 @@
 			[91, 93, 90],
 			[82, 81, 83]
 		],
-		headers: ["Model A", "Model B", "Model C"],
+		headers: ["Model A", "Model B", "Empty Values"],
 		display_value: [
-			["🥇 95", "92", "88"],
-			["🥈 89", "90", "85"],
-			["🥉 92", "88", "91"],
-			["87", "85", "89"],
-			["91", "93", "90"],
-			["82", "81", "83"]
+			["🥇 95", "92", ""],
+			["🥈 89", "90", ""],
+			["🥉 92", "88", ""],
+			["87", "85", ""],
+			["91", "93", ""],
+			["82", "81", ""]
 		],
 		label: "Model Performance with Medal Indicators",
 		col_count: [3, "dynamic"],

package/dist/shared/Table.svelte

@@ -95,6 +95,8 @@ $:
 onMount(() => {
   df_ctx.parent_element = parent;
   df_ctx.get_data_at = get_data_at;
+  df_ctx.get_column = get_column;
+  df_ctx.get_row = get_row;
   df_ctx.dispatch = dispatch;
   init_drag_handlers();
   const observer = new IntersectionObserver((entries) => {
@@ -146,6 +148,8 @@ onMount(() => {
   );
 });
 const get_data_at = (row, col) => data?.[row]?.[col]?.value;
+const get_column = (col) => data?.map((row) => row[col]?.value) ?? [];
+const get_row = (row) => data?.[row]?.map((cell) => cell.value) ?? [];
 $: {
   if (!dequal(headers, old_headers)) {
     _headers = make_headers(headers, col_count, els, make_id);
@@ -205,7 +209,7 @@ $:
       row.forEach((cell, col_idx) => {
         cell_map.set(cell.id, {
           value: cell.value,
-          display_value: cell.display_value || String(cell.value),
+          display_value: cell.display_value !== void 0 ? cell.display_value : String(cell.value),
           styling: styling?.[row_idx]?.[col_idx] || ""
         });
       });
@@ -216,7 +220,7 @@ $:
         const original = cell_map.get(cell.id);
         return {
           ...cell,
-          display_value: original?.display_value || String(cell.value),
+          display_value: original?.display_value !== void 0 ? original.display_value : String(cell.value),
           styling: original?.styling || ""
         };
       })
@@ -483,7 +487,9 @@ function commit_filter() {
       const styling_row = [];
       row.forEach((cell) => {
         data_row.push(cell.value);
-        display_row.push(cell.display_value || String(cell.value));
+        display_row.push(
+          cell.display_value !== void 0 ? cell.display_value : String(cell.value)
+        );
         styling_row.push(cell.styling || "");
       });
       filtered_data.push(data_row);
@@ -575,10 +581,10 @@ $:
 function get_cell_display_value(row, col) {
   const is_search_active = $df_state.current_search_query !== void 0;
   if (is_search_active && search_results?.[row]?.[col]) {
-    return search_results[row][col].display_value || String(search_results[row][col].value);
+    return search_results[row][col].display_value !== void 0 ? search_results[row][col].display_value : String(search_results[row][col].value);
   }
   if (data?.[row]?.[col]) {
-    return data[row][col].display_value || String(data[row][col].value);
+    return data[row][col].display_value !== void 0 ? data[row][col].display_value : String(data[row][col].value);
   }
   return "";
 }

package/dist/shared/TableCell.svelte

@@ -84,7 +84,9 @@ $:
 		<EditableCell
 			bind:value
 			bind:el={el.input}
-			display_value={display_value || String(value)}
+			display_value={display_value !== undefined
+				? display_value
+				: String(value)}
 			{latex_delimiters}
 			{line_breaks}
 			{editable}

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

@@ -140,6 +140,8 @@ export interface DataFrameContext {
     }>;
     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;
 }
 export declare function create_dataframe_context(config: DataFrameState["config"]): DataFrameContext;

package/dist/shared/context/dataframe_context.js

@@ -237,6 +237,8 @@ function create_actions(state, context) {
             }
             context.dispatch?.("select", {
                 index: [actual_row, col],
+                col_value: context.get_column(col),
+                row_value: context.get_row(actual_row),
                 value: context.get_data_at(actual_row, col)
             });
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.6",
+  "version": "0.17.8",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.15.1",
-    "@gradio/button": "^0.4.14",
+    "@gradio/client": "^1.14.2",
+    "@gradio/atoms": "^0.15.2",
     "@gradio/icons": "^0.12.0",
-    "@gradio/client": "^1.14.1",
-    "@gradio/markdown-code": "^0.4.2",
-    "@gradio/statustracker": "^0.10.8",
-    "@gradio/upload": "^0.16.1",
-    "@gradio/utils": "^0.10.1"
+    "@gradio/button": "^0.4.15",
+    "@gradio/markdown-code": "^0.4.3",
+    "@gradio/statustracker": "^0.10.9",
+    "@gradio/upload": "^0.16.2",
+    "@gradio/utils": "^0.10.2"
   },
   "exports": {
     ".": {

package/shared/Table.svelte

@@ -111,6 +111,8 @@
 	onMount(() => {
 		df_ctx.parent_element = parent;
 		df_ctx.get_data_at = get_data_at;
+		df_ctx.get_column = get_column;
+		df_ctx.get_row = get_row;
 		df_ctx.dispatch = dispatch;
 		init_drag_handlers();
 
@@ -186,6 +188,12 @@
 	const get_data_at = (row: number, col: number): string | number =>
 		data?.[row]?.[col]?.value;
 
+	const get_column = (col: number): (string | number)[] =>
+		data?.map((row) => row[col]?.value) ?? [];
+
+	const get_row = (row: number): (string | number)[] =>
+		data?.[row]?.map((cell) => cell.value) ?? [];
+
 	$: {
 		if (!dequal(headers, old_headers)) {
 			_headers = make_headers(headers, col_count, els, make_id);
@@ -268,7 +276,10 @@
 			row.forEach((cell, col_idx) => {
 				cell_map.set(cell.id, {
 					value: cell.value,
-					display_value: cell.display_value || String(cell.value),
+					display_value:
+						cell.display_value !== undefined
+							? cell.display_value
+							: String(cell.value),
 					styling: styling?.[row_idx]?.[col_idx] || ""
 				});
 			});
@@ -281,7 +292,10 @@
 				const original = cell_map.get(cell.id);
 				return {
 					...cell,
-					display_value: original?.display_value || String(cell.value),
+					display_value:
+						original?.display_value !== undefined
+							? original.display_value
+							: String(cell.value),
 					styling: original?.styling || ""
 				};
 			})
@@ -601,7 +615,11 @@
 
 				row.forEach((cell) => {
 					data_row.push(cell.value);
-					display_row.push(cell.display_value || String(cell.value));
+					display_row.push(
+						cell.display_value !== undefined
+							? cell.display_value
+							: String(cell.value)
+					);
 					styling_row.push(cell.styling || "");
 				});
 
@@ -705,14 +723,15 @@
 		const is_search_active = $df_state.current_search_query !== undefined;
 
 		if (is_search_active && search_results?.[row]?.[col]) {
-			return (
-				search_results[row][col].display_value ||
-				String(search_results[row][col].value)
-			);
+			return search_results[row][col].display_value !== undefined
+				? search_results[row][col].display_value
+				: String(search_results[row][col].value);
 		}
 
 		if (data?.[row]?.[col]) {
-			return data[row][col].display_value || String(data[row][col].value);
+			return data[row][col].display_value !== undefined
+				? data[row][col].display_value
+				: String(data[row][col].value);
 		}
 
 		return "";

package/shared/TableCell.svelte

@@ -122,7 +122,9 @@
 		<EditableCell
 			bind:value
 			bind:el={el.input}
-			display_value={display_value || String(value)}
+			display_value={display_value !== undefined
+				? display_value
+				: String(value)}
 			{latex_delimiters}
 			{line_breaks}
 			{editable}

package/shared/context/dataframe_context.ts

@@ -155,6 +155,8 @@ export interface DataFrameContext {
 	>;
 	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;
 }
 
@@ -467,6 +469,8 @@ function create_actions(
 
 			context.dispatch?.("select", {
 				index: [actual_row, col],
+				col_value: context.get_column!(col),
+				row_value: context.get_row!(actual_row),
 				value: context.get_data_at!(actual_row, col)
 			});
 		},