@gradio/dataframe 0.11.0-beta.7 → 0.11.0

package/shared/Table.svelte

@@ -4,19 +4,14 @@
 	import { dequal } from "dequal/lite";
 	import { copy } from "@gradio/utils";
 	import { Upload } from "@gradio/upload";
-	import { BaseButton } from "@gradio/button";
+
 	import EditableCell from "./EditableCell.svelte";
 	import type { SelectData } from "@gradio/utils";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
-	import type {
-		Headers,
-		HeadersWithIDs,
-		Data,
-		Metadata,
-		Datatype
-	} from "./utils";
+	import type { Headers, HeadersWithIDs, Metadata, Datatype } from "./utils";
+	import CellMenu from "./CellMenu.svelte";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
@@ -64,7 +59,7 @@
 	$: {
 		if (selected !== false) {
 			const [row, col] = selected;
-			if (!isNaN(row) && !isNaN(col)) {
+			if (!isNaN(row) && !isNaN(col) && data[row]) {
 				dispatch("select", {
 					index: [row, col],
 					value: get_data_at(row, col),
@@ -346,7 +341,14 @@
 		}
 	}
 
+	let active_cell: { row: number; col: number } | null = null;
+
 	async function handle_cell_click(i: number, j: number): Promise<void> {
+		if (active_cell && active_cell.row === i && active_cell.col === j) {
+			active_cell = null;
+		} else {
+			active_cell = { row: i, col: j };
+		}
 		if (dequal(editing, [i, j])) return;
 		header_edit = false;
 		selected_header = false;
@@ -410,35 +412,39 @@
 			return;
 		}
 
-		data.splice(
-			index ? index + 1 : data.length,
-			0,
-			Array(data[0].length)
-				.fill(0)
-				.map((_, i) => {
-					const _id = make_id();
+		const new_row = Array(data[0].length)
+			.fill(0)
+			.map((_, i) => {
+				const _id = make_id();
+				els[_id] = { cell: null, input: null };
+				return { id: _id, value: "" };
+			});
 
-					els[_id] = { cell: null, input: null };
-					return { id: _id, value: "" };
-				})
-		);
+		if (index !== undefined && index >= 0 && index <= data.length) {
+			data.splice(index, 0, new_row);
+		} else {
+			data.push(new_row);
+		}
 
 		data = data;
-		selected = [index ? index + 1 : data.length - 1, 0];
+		selected = [index !== undefined ? index : data.length - 1, 0];
 	}
 
 	$: (data || selected_header) && trigger_change();
 
-	async function add_col(): Promise<void> {
+	async function add_col(index?: number): Promise<void> {
 		parent.focus();
 		if (col_count[1] !== "dynamic") return;
+
+		const insert_index = index !== undefined ? index : data[0].length;
+
 		for (let i = 0; i < data.length; i++) {
 			const _id = make_id();
 			els[_id] = { cell: null, input: null };
-			data[i].push({ id: _id, value: "" });
+			data[i].splice(insert_index, 0, { id: _id, value: "" });
 		}
 
-		headers.push(`Header ${headers.length + 1}`);
+		headers.splice(insert_index, 0, `Header ${headers.length + 1}`);
 
 		data = data;
 		headers = headers;
@@ -446,13 +452,23 @@
 		await tick();
 
 		requestAnimationFrame(() => {
-			edit_header(headers.length - 1, true);
+			edit_header(insert_index, true);
 			const new_w = parent.querySelectorAll("tbody")[1].offsetWidth;
 			parent.querySelectorAll("table")[1].scrollTo({ left: new_w });
 		});
 	}
 
 	function handle_click_outside(event: Event): void {
+		if (
+			(active_cell_menu &&
+				!(event.target as HTMLElement).closest(".cell-menu")) ||
+			(active_header_menu &&
+				!(event.target as HTMLElement).closest(".cell-menu"))
+		) {
+			active_cell_menu = null;
+			active_header_menu = null;
+		}
+
 		event.stopImmediatePropagation();
 		const [trigger] = event.composedPath() as HTMLElement[];
 		if (parent.contains(trigger)) {
@@ -463,6 +479,9 @@
 		header_edit = false;
 		selected_header = false;
 		selected = false;
+		active_cell = null;
+		active_cell_menu = null;
+		active_header_menu = null;
 	}
 
 	function guess_delimitaor(
@@ -640,6 +659,107 @@
 			observer.disconnect();
 		};
 	});
+
+	let highlighted_column: number | null = null;
+
+	let active_cell_menu: {
+		row: number;
+		col: number;
+		x: number;
+		y: number;
+	} | null = null;
+
+	function toggle_cell_menu(event: MouseEvent, row: number, col: number): void {
+		event.stopPropagation();
+		if (
+			active_cell_menu &&
+			active_cell_menu.row === row &&
+			active_cell_menu.col === col
+		) {
+			active_cell_menu = null;
+		} else {
+			const cell = (event.target as HTMLElement).closest("td");
+			if (cell) {
+				const rect = cell.getBoundingClientRect();
+				active_cell_menu = {
+					row,
+					col,
+					x: rect.right,
+					y: rect.bottom
+				};
+			}
+		}
+	}
+
+	function add_row_at(index: number, position: "above" | "below"): void {
+		const row_index = position === "above" ? index : index + 1;
+		add_row(row_index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
+	function add_col_at(index: number, position: "left" | "right"): void {
+		const col_index = position === "left" ? index : index + 1;
+		add_col(col_index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
+	onMount(() => {
+		document.addEventListener("click", handle_click_outside);
+		return () => {
+			document.removeEventListener("click", handle_click_outside);
+		};
+	});
+
+	let active_button: {
+		type: "header" | "cell";
+		row?: number;
+		col: number;
+	} | null = null;
+
+	function toggle_header_button(col: number): void {
+		if (active_button?.type === "header" && active_button.col === col) {
+			active_button = null;
+		} else {
+			active_button = { type: "header", col };
+		}
+	}
+
+	function toggle_cell_button(row: number, col: number): void {
+		if (
+			active_button?.type === "cell" &&
+			active_button.row === row &&
+			active_button.col === col
+		) {
+			active_button = null;
+		} else {
+			active_button = { type: "cell", row, col };
+		}
+	}
+
+	let active_header_menu: {
+		col: number;
+		x: number;
+		y: number;
+	} | null = null;
+
+	function toggle_header_menu(event: MouseEvent, col: number): void {
+		event.stopPropagation();
+		if (active_header_menu && active_header_menu.col === col) {
+			active_header_menu = null;
+		} else {
+			const header = (event.target as HTMLElement).closest("th");
+			if (header) {
+				const rect = header.getBoundingClientRect();
+				active_header_menu = {
+					col,
+					x: rect.right,
+					y: rect.bottom
+				};
+			}
+		}
+	}
 </script>
 
 <svelte:window
@@ -758,40 +878,58 @@
 							class:focus={header_edit === i || selected_header === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
 							style="width: var(--cell-width-{i});"
+							on:click={() => {
+								toggle_header_button(i);
+							}}
 						>
 							<div class="cell-wrap">
-								<EditableCell
-									bind:value={_headers[i].value}
-									bind:el={els[id].input}
-									{latex_delimiters}
-									{line_breaks}
-									edit={header_edit === i}
-									on:keydown={end_header_edit}
-									on:dblclick={() => edit_header(i)}
-									{select_on_focus}
-									header
-									{root}
-								/>
-
-								<!-- TODO: fix -->
-								<!-- svelte-ignore a11y-click-events-have-key-events -->
-								<!-- svelte-ignore a11y-no-static-element-interactions-->
-								<div
-									class:sorted={sort_by === i}
-									class:des={sort_by === i && sort_direction === "des"}
-									class="sort-button {sort_direction} "
-									on:click={() => handle_sort(i)}
-								>
-									<svg
-										width="1em"
-										height="1em"
-										viewBox="0 0 9 7"
-										fill="none"
-										xmlns="http://www.w3.org/2000/svg"
+								<div class="header-content">
+									<EditableCell
+										bind:value={_headers[i].value}
+										bind:el={els[id].input}
+										{latex_delimiters}
+										{line_breaks}
+										edit={header_edit === i}
+										on:keydown={end_header_edit}
+										on:dblclick={() => edit_header(i)}
+										{select_on_focus}
+										header
+										{root}
+									/>
+									<!-- TODO: fix -->
+									<!-- svelte-ignore a11y-click-events-have-key-events -->
+									<!-- svelte-ignore a11y-no-static-element-interactions-->
+									<div
+										class:sorted={sort_by === i}
+										class:des={sort_by === i && sort_direction === "des"}
+										class="sort-button {sort_direction}"
+										on:click={(event) => {
+											event.stopPropagation();
+											handle_sort(i);
+										}}
 									>
-										<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
-									</svg>
+										<svg
+											width="1em"
+											height="1em"
+											viewBox="0 0 9 7"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
+										</svg>
+									</div>
 								</div>
+
+								{#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)}
+									>
+										⋮
+									</button>
+								{/if}
 							</div>
 						</th>
 					{/each}
@@ -802,11 +940,17 @@
 						<td
 							tabindex="0"
 							on:touchstart={() => start_edit(index, j)}
-							on:click={() => handle_cell_click(index, j)}
+							on:click={() => {
+								handle_cell_click(index, j);
+								toggle_cell_button(index, j);
+							}}
 							on:dblclick={() => start_edit(index, j)}
 							style:width="var(--cell-width-{j})"
 							style={styling?.[index]?.[j] || ""}
 							class:focus={dequal(selected, [index, j])}
+							class:menu-active={active_cell_menu &&
+								active_cell_menu.row === index &&
+								active_cell_menu.col === j}
 						>
 							<div class="cell-wrap">
 								<EditableCell
@@ -822,6 +966,17 @@
 									{clear_on_focus}
 									{root}
 								/>
+								{#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)}
+									>
+										⋮
+									</button>
+								{/if}
 							</div>
 						</td>
 					{/each}
@@ -829,64 +984,35 @@
 			</VirtualTable>
 		</Upload>
 	</div>
-	{#if editable}
-		<div class="controls-wrap">
-			{#if row_count[1] === "dynamic"}
-				<span class="button-wrap">
-					<BaseButton
-						variant="secondary"
-						size="sm"
-						on:click={(e) => (e.stopPropagation(), add_row())}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink"
-							aria-hidden="true"
-							role="img"
-							width="1em"
-							height="1em"
-							preserveAspectRatio="xMidYMid meet"
-							viewBox="0 0 32 32"
-						>
-							<path
-								fill="currentColor"
-								d="M24.59 16.59L17 24.17V4h-2v20.17l-7.59-7.58L6 18l10 10l10-10l-1.41-1.41z"
-							/>
-						</svg>
-						{i18n("dataframe.new_row")}
-					</BaseButton>
-				</span>
-			{/if}
-			{#if col_count[1] === "dynamic"}
-				<span class="button-wrap">
-					<BaseButton
-						variant="secondary"
-						size="sm"
-						on:click={(e) => (e.stopPropagation(), add_col())}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink"
-							aria-hidden="true"
-							role="img"
-							width="1em"
-							height="1em"
-							preserveAspectRatio="xMidYMid meet"
-							viewBox="0 0 32 32"
-						>
-							<path
-								fill="currentColor"
-								d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10L18 6z"
-							/>
-						</svg>
-						{i18n("dataframe.new_column")}
-					</BaseButton>
-				</span>
-			{/if}
-		</div>
-	{/if}
 </div>
 
+{#if active_cell_menu !== null}
+	<CellMenu
+		{i18n}
+		x={active_cell_menu.x}
+		y={active_cell_menu.y}
+		col={active_cell_menu.col}
+		row={active_cell_menu?.row ?? -1}
+		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")}
+		on_add_column_right={() => add_col_at(active_cell_menu?.col ?? -1, "right")}
+	/>
+{/if}
+
+{#if active_header_menu !== null}
+	<CellMenu
+		{i18n}
+		x={active_header_menu.x}
+		y={active_header_menu.y}
+		col={active_header_menu.col}
+		row={-1}
+		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
+		on_add_column_right={() =>
+			add_col_at(active_header_menu?.col ?? -1, "right")}
+	/>
+{/if}
+
 <style>
 	.button-wrap:hover svg {
 		color: var(--color-accent);
@@ -987,8 +1113,9 @@
 	}
 
 	th.focus,
-	td.focus {
-		--ring-color: var(--color-accent);
+	td.focus,
+	td.menu-active {
+		z-index: 1;
 	}
 
 	tr:last-child td:first-child {
@@ -1037,21 +1164,22 @@
 	}
 
 	.cell-wrap {
+		position: relative;
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
 		outline: none;
 		height: var(--size-full);
 		min-height: var(--size-9);
+		overflow: hidden;
 	}
 
-	.controls-wrap {
+	.header-content {
 		display: flex;
-		justify-content: flex-end;
-		padding-top: var(--size-2);
-	}
-
-	.controls-wrap > * + * {
-		margin-left: var(--size-1);
+		align-items: center;
+		overflow: hidden;
+		flex-grow: 1;
+		min-width: 0;
 	}
 
 	.row_odd {
@@ -1065,4 +1193,45 @@
 	table {
 		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;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--block-radius);
+		width: var(--size-5);
+		height: var(--size-5);
+		min-width: var(--size-5);
+		padding: 0;
+		margin-right: var(--spacing-sm);
+		z-index: var(--layer-2);
+	}
+
+	.cell-menu-button:hover {
+		background-color: var(--color-bg-hover);
+	}
+
+	.cell-menu-button.visible {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	th .cell-wrap {
+		padding-right: var(--spacing-sm);
+	}
+
+	th .header-content {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 </style>