Hide option to add row/col when count is fixed in dataframe (#9649)

* * hide add row or col if count is fixed * restore selected cell outline * add changeset * * fix selected cell border * close cell menu on window resize * tweak * fix test * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Oct 24, 2024 · b1b81c9 · b1b81c9
1 parent 7cce63e
commit b1b81c9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 32 deletions.
diff --git a/.changeset/small-suns-accept.md b/.changeset/small-suns-accept.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+feat:Hide option to add row/col when count is fixed in dataframe
diff --git a/js/dataframe/shared/CellMenu.svelte b/js/dataframe/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>

diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/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;

diff --git a/js/spa/test/blocks_flashcards.spec.ts b/js/spa/test/blocks_flashcards.spec.ts
@@ -26,7 +26,7 @@ test("shows the results tab when results > 0", async ({ page }) => {
 	await page
 		.getByRole("button", { name: "front back" })
 		.getByRole("button")
-		.nth(3)
+		.nth(4)
 		.dblclick();
 	await page
 		.getByRole("button", { name: "front back" })