From b1b81c9e1c10c2c14a5cb0661d2503259ece1a1b Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:03:10 +0100
Subject: [PATCH] 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>
---
 .changeset/small-suns-accept.md       |  6 ++++
 js/dataframe/shared/CellMenu.svelte   | 24 ++++++++------
 js/dataframe/shared/Table.svelte      | 45 ++++++++++++++-------------
 js/spa/test/blocks_flashcards.spec.ts |  2 +-
 4 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/small-suns-accept.md

diff --git a/.changeset/small-suns-accept.md b/.changeset/small-suns-accept.md
new file mode 100644
index 0000000000000..e1735ef6aa325
--- /dev/null
+++ 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
index 9ba1aaa3093fb..53f9fdea9fa0e 100644
--- 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
index 3b410762713d8..91c4f6eaad527 100644
--- 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
index 085a9ed10b529..b3fae4a70267d 100644
--- 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" })