@gradio/dataframe 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @gradio/dataframe
 
+## 0.12.2
+
+### Fixes
+
+- [#9892](https://github.com/gradio-app/gradio/pull/9892) [`7d77024`](https://github.com/gradio-app/gradio/commit/7d77024cb8f9cfd39a6468de9534e58dcfa69f49) - Fix dataframe height increasing on scroll.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/statustracker@0.9.4
+- @gradio/button@0.3.6
+- @gradio/atoms@0.11.0
+- @gradio/upload@0.14.0
+
+## 0.12.1
+
+### Features
+
+- [#9649](https://github.com/gradio-app/gradio/pull/9649) [`b1b81c9`](https://github.com/gradio-app/gradio/commit/b1b81c9e1c10c2c14a5cb0661d2503259ece1a1b) - Hide option to add row/col when count is fixed in dataframe.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/markdown-code@0.2.1
+- @gradio/statustracker@0.9.3
+- @gradio/atoms@0.10.1
+- @gradio/client@1.7.1
+- @gradio/upload@0.13.5
+- @gradio/button@0.3.5
+
 ## 0.12.0
 
 ### Features

package/Dataframe.stories.svelte

@@ -181,12 +181,16 @@
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 
-		const cell = canvas.getByText("200");
-		userEvent.click(cell);
-		const open_dialog_btn = canvas.getAllByText("⋮");
-		await userEvent.click(open_dialog_btn[0]);
+		const cell_400 = canvas.getAllByRole("cell")[5];
+		userEvent.click(cell_400);
+
+		const open_dialog_btn = within(cell_400).getByText("⋮");
+		await userEvent.click(open_dialog_btn);
 
 		const add_row_btn = canvas.getByText("Add row above");
 		await userEvent.click(add_row_btn);
+
+		const new_cell = canvas.getAllByRole("cell")[9];
+		userEvent.click(new_cell);
 	}}
 />

package/dist/shared/CellMenu.svelte

@@ -7,10 +7,16 @@ export let on_add_row_below;
 export let on_add_column_left;
 export let on_add_column_right;
 export let row;
+export let col_count;
+export let row_count;
 export let i18n;
 let menu_element;
 $:
   is_header = row === -1;
+$:
+  can_add_rows = row_count[1] === "dynamic";
+$:
+  can_add_columns = col_count[1] === "dynamic";
 onMount(() => {
   position_menu();
 });
@@ -34,7 +40,7 @@ function position_menu() {
 </script>
 
 <div bind:this={menu_element} class="cell-menu">
-	{#if !is_header}
+	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
 			<Arrow transform="rotate(-90 12 12)" />
 			{i18n("dataframe.add_row_above")}
@@ -44,14 +50,16 @@ function position_menu() {
 			{i18n("dataframe.add_row_below")}
 		</button>
 	{/if}
-	<button on:click={() => on_add_column_left()}>
-		<Arrow transform="rotate(180 12 12)" />
-		{i18n("dataframe.add_column_left")}
-	</button>
-	<button on:click={() => on_add_column_right()}>
-		<Arrow transform="rotate(0 12 12)" />
-		{i18n("dataframe.add_column_right")}
-	</button>
+	{#if can_add_columns}
+		<button on:click={() => on_add_column_left()}>
+			<Arrow transform="rotate(180 12 12)" />
+			{i18n("dataframe.add_column_left")}
+		</button>
+		<button on:click={() => on_add_column_right()}>
+			<Arrow transform="rotate(0 12 12)" />
+			{i18n("dataframe.add_column_right")}
+		</button>
+	{/if}
 </div>
 
 <style>

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         on_add_column_left: () => void;
         on_add_column_right: () => void;
         row: number;
+        col_count: [number, "fixed" | "dynamic"];
+        row_count: [number, "fixed" | "dynamic"];
         i18n: I18nFormatter;
     };
     events: {

package/dist/shared/Table.svelte

@@ -535,10 +535,17 @@ function add_col_at(index, position) {
   active_cell_menu = null;
   active_header_menu = null;
 }
+function handle_resize() {
+  active_cell_menu = null;
+  active_header_menu = null;
+  set_cell_widths();
+}
 onMount(() => {
   document.addEventListener("click", handle_click_outside);
+  window.addEventListener("resize", handle_resize);
   return () => {
     document.removeEventListener("click", handle_click_outside);
+    window.removeEventListener("resize", handle_resize);
   };
 });
 let active_button = null;
@@ -740,8 +747,6 @@ function reset_selection() {
 								{#if editable}
 									<button
 										class="cell-menu-button"
-										class:visible={active_button?.type === "header" &&
-											active_button.col === i}
 										on:click={(event) => toggle_header_menu(event, i)}
 									>
 										⋮
@@ -786,9 +791,6 @@ function reset_selection() {
 								{#if editable}
 									<button
 										class="cell-menu-button"
-										class:visible={active_button?.type === "cell" &&
-											active_button.row === index &&
-											active_button.col === j}
 										on:click={(event) => toggle_cell_menu(event, index, j)}
 									>
 										⋮
@@ -809,6 +811,8 @@ function reset_selection() {
 		x={active_cell_menu.x}
 		y={active_cell_menu.y}
 		row={active_cell_menu?.row ?? -1}
+		{col_count}
+		{row_count}
 		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
 		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
 		on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
@@ -822,6 +826,8 @@ function reset_selection() {
 		x={active_header_menu.x}
 		y={active_header_menu.y}
 		row={-1}
+		{col_count}
+		{row_count}
 		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
 		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
 		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
@@ -899,6 +905,7 @@ function reset_selection() {
 		top: 0;
 		left: 0;
 		z-index: var(--layer-1);
+		box-shadow: var(--shadow-drop);
 	}
 
 	tr {
@@ -918,6 +925,7 @@ function reset_selection() {
 		--ring-color: transparent;
 		position: relative;
 		outline: none;
+		box-shadow: inset 0 0 0 1px var(--ring-color);
 		padding: 0;
 	}
 
@@ -930,9 +938,8 @@ function reset_selection() {
 	}
 
 	th.focus,
-	td.focus,
-	td.menu-active {
-		z-index: 1;
+	td.focus {
+		--ring-color: var(--color-accent);
 	}
 
 	tr:last-child td:first-child {
@@ -981,10 +988,8 @@ function reset_selection() {
 	}
 
 	.cell-wrap {
-		position: relative;
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
 		outline: none;
 		height: var(--size-full);
 		min-height: var(--size-9);
@@ -999,6 +1004,12 @@ function reset_selection() {
 		min-width: 0;
 	}
 
+	.controls-wrap {
+		display: flex;
+		justify-content: flex-end;
+		padding-top: var(--size-2);
+	}
+
 	.row_odd {
 		background: var(--table-odd-background-fill);
 	}
@@ -1011,13 +1022,6 @@ function reset_selection() {
 		border-collapse: separate;
 	}
 
-	.select-column {
-		width: var(--size-3);
-		text-align: center;
-		padding: var(--size-1);
-		border-right: none;
-	}
-
 	.cell-menu-button {
 		flex-shrink: 0;
 		display: none;
@@ -1036,16 +1040,12 @@ function reset_selection() {
 		background-color: var(--color-bg-hover);
 	}
 
-	.cell-menu-button.visible {
+	td.focus .cell-menu-button {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
-	th .cell-wrap {
-		padding-right: var(--spacing-sm);
-	}
-
 	th .header-content {
 		white-space: nowrap;
 		overflow: hidden;

package/dist/shared/VirtualTable.svelte

@@ -194,8 +194,6 @@ $:
   }) : sortedItems.slice(0, max_height / sortedItems.length * average_height + 1).map((data, i) => {
     return { index: i + start, data };
   });
-$:
-  actual_height = visible.length * average_height + 10;
 onMount(() => {
   rows = contents.children;
   mounted = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,13 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.10.0",
-    "@gradio/button": "^0.3.4",
-    "@gradio/client": "^1.7.0",
-    "@gradio/markdown-code": "^0.2.0",
-    "@gradio/statustracker": "^0.9.2",
-    "@gradio/utils": "^0.7.0",
-    "@gradio/upload": "^0.13.4"
+    "@gradio/atoms": "^0.11.0",
+    "@gradio/button": "^0.3.6",
+    "@gradio/client": "^1.7.1",
+    "@gradio/statustracker": "^0.9.4",
+    "@gradio/markdown-code": "^0.2.1",
+    "@gradio/upload": "^0.14.0",
+    "@gradio/utils": "^0.7.0"
   },
   "exports": {
     ".": {
@@ -42,7 +42,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.12.1"
+    "@gradio/preview": "^0.13.0"
   },
   "repository": {
     "type": "git",

package/shared/CellMenu.svelte

@@ -10,11 +10,15 @@
 	export let on_add_column_left: () => void;
 	export let on_add_column_right: () => void;
 	export let row: number;
+	export let col_count: [number, "fixed" | "dynamic"];
+	export let row_count: [number, "fixed" | "dynamic"];
 
 	export let i18n: I18nFormatter;
 	let menu_element: HTMLDivElement;
 
 	$: is_header = row === -1;
+	$: can_add_rows = row_count[1] === "dynamic";
+	$: can_add_columns = col_count[1] === "dynamic";
 
 	onMount(() => {
 		position_menu();
@@ -44,7 +48,7 @@
 </script>
 
 <div bind:this={menu_element} class="cell-menu">
-	{#if !is_header}
+	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
 			<Arrow transform="rotate(-90 12 12)" />
 			{i18n("dataframe.add_row_above")}
@@ -54,14 +58,16 @@
 			{i18n("dataframe.add_row_below")}
 		</button>
 	{/if}
-	<button on:click={() => on_add_column_left()}>
-		<Arrow transform="rotate(180 12 12)" />
-		{i18n("dataframe.add_column_left")}
-	</button>
-	<button on:click={() => on_add_column_right()}>
-		<Arrow transform="rotate(0 12 12)" />
-		{i18n("dataframe.add_column_right")}
-	</button>
+	{#if can_add_columns}
+		<button on:click={() => on_add_column_left()}>
+			<Arrow transform="rotate(180 12 12)" />
+			{i18n("dataframe.add_column_left")}
+		</button>
+		<button on:click={() => on_add_column_right()}>
+			<Arrow transform="rotate(0 12 12)" />
+			{i18n("dataframe.add_column_right")}
+		</button>
+	{/if}
 </div>
 
 <style>

package/shared/Table.svelte

@@ -710,10 +710,18 @@
 		active_header_menu = null;
 	}
 
+	function handle_resize(): void {
+		active_cell_menu = null;
+		active_header_menu = null;
+		set_cell_widths();
+	}
+
 	onMount(() => {
 		document.addEventListener("click", handle_click_outside);
+		window.addEventListener("resize", handle_resize);
 		return () => {
 			document.removeEventListener("click", handle_click_outside);
+			window.removeEventListener("resize", handle_resize);
 		};
 	});
 
@@ -933,8 +941,6 @@
 								{#if editable}
 									<button
 										class="cell-menu-button"
-										class:visible={active_button?.type === "header" &&
-											active_button.col === i}
 										on:click={(event) => toggle_header_menu(event, i)}
 									>
 										⋮
@@ -979,9 +985,6 @@
 								{#if editable}
 									<button
 										class="cell-menu-button"
-										class:visible={active_button?.type === "cell" &&
-											active_button.row === index &&
-											active_button.col === j}
 										on:click={(event) => toggle_cell_menu(event, index, j)}
 									>
 										⋮
@@ -1002,6 +1005,8 @@
 		x={active_cell_menu.x}
 		y={active_cell_menu.y}
 		row={active_cell_menu?.row ?? -1}
+		{col_count}
+		{row_count}
 		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
 		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
 		on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
@@ -1015,6 +1020,8 @@
 		x={active_header_menu.x}
 		y={active_header_menu.y}
 		row={-1}
+		{col_count}
+		{row_count}
 		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
 		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
 		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
@@ -1092,6 +1099,7 @@
 		top: 0;
 		left: 0;
 		z-index: var(--layer-1);
+		box-shadow: var(--shadow-drop);
 	}
 
 	tr {
@@ -1111,6 +1119,7 @@
 		--ring-color: transparent;
 		position: relative;
 		outline: none;
+		box-shadow: inset 0 0 0 1px var(--ring-color);
 		padding: 0;
 	}
 
@@ -1123,9 +1132,8 @@
 	}
 
 	th.focus,
-	td.focus,
-	td.menu-active {
-		z-index: 1;
+	td.focus {
+		--ring-color: var(--color-accent);
 	}
 
 	tr:last-child td:first-child {
@@ -1174,10 +1182,8 @@
 	}
 
 	.cell-wrap {
-		position: relative;
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
 		outline: none;
 		height: var(--size-full);
 		min-height: var(--size-9);
@@ -1192,6 +1198,12 @@
 		min-width: 0;
 	}
 
+	.controls-wrap {
+		display: flex;
+		justify-content: flex-end;
+		padding-top: var(--size-2);
+	}
+
 	.row_odd {
 		background: var(--table-odd-background-fill);
 	}
@@ -1204,13 +1216,6 @@
 		border-collapse: separate;
 	}
 
-	.select-column {
-		width: var(--size-3);
-		text-align: center;
-		padding: var(--size-1);
-		border-right: none;
-	}
-
 	.cell-menu-button {
 		flex-shrink: 0;
 		display: none;
@@ -1229,16 +1234,12 @@
 		background-color: var(--color-bg-hover);
 	}
 
-	.cell-menu-button.visible {
+	td.focus .cell-menu-button {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
-	th .cell-wrap {
-		padding-right: var(--spacing-sm);
-	}
-
 	th .header-content {
 		white-space: nowrap;
 		overflow: hidden;

package/shared/VirtualTable.svelte

@@ -248,7 +248,6 @@
 					return { index: i + start, data };
 				});
 
-	$: actual_height = visible.length * average_height + 10;
 	onMount(() => {
 		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
 		mounted = true;