@gradio/dataframe 0.11.0-beta.7 → 0.11.0

package/dist/shared/Table.svelte

@@ -3,10 +3,10 @@ import { dsvFormat } from "d3-dsv";
 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 {} from "@gradio/client";
 import VirtualTable from "./VirtualTable.svelte";
+import CellMenu from "./CellMenu.svelte";
 export let datatype;
 export let label = null;
 export let show_label = true;
@@ -34,7 +34,7 @@ const get_data_at = (row, col) => data?.[row]?.[col]?.value;
 $: {
   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),
@@ -250,7 +250,13 @@ async function handle_keydown(event) {
       }
   }
 }
+let active_cell = null;
 async function handle_cell_click(i, j) {
+  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;
@@ -308,40 +314,46 @@ async function add_row(index) {
     values = [Array(headers.length).fill("")];
     return;
   }
-  data.splice(
-    index ? index + 1 : data.length,
-    0,
-    Array(data[0].length).fill(0).map((_, i) => {
-      const _id = make_id();
-      els[_id] = { cell: null, input: null };
-      return { id: _id, value: "" };
-    })
-  );
+  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: "" };
+  });
+  if (index !== void 0 && 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 !== void 0 ? index : data.length - 1, 0];
 }
 $:
   (data || selected_header) && trigger_change();
-async function add_col() {
+async function add_col(index) {
   parent.focus();
   if (col_count[1] !== "dynamic")
     return;
+  const insert_index = index !== void 0 ? 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;
   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) {
+  if (active_cell_menu && !event.target.closest(".cell-menu") || active_header_menu && !event.target.closest(".cell-menu")) {
+    active_cell_menu = null;
+    active_header_menu = null;
+  }
   event.stopImmediatePropagation();
   const [trigger] = event.composedPath();
   if (parent.contains(trigger)) {
@@ -351,6 +363,9 @@ function handle_click_outside(event) {
   header_edit = false;
   selected_header = false;
   selected = false;
+  active_cell = null;
+  active_cell_menu = null;
+  active_header_menu = null;
 }
 function guess_delimitaor(text, possibleDelimiters) {
   return possibleDelimiters.filter(weedOut);
@@ -485,6 +500,75 @@ onMount(() => {
     observer.disconnect();
   };
 });
+let highlighted_column = null;
+let active_cell_menu = null;
+function toggle_cell_menu(event, row, col) {
+  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.closest("td");
+    if (cell) {
+      const rect = cell.getBoundingClientRect();
+      active_cell_menu = {
+        row,
+        col,
+        x: rect.right,
+        y: rect.bottom
+      };
+    }
+  }
+}
+function add_row_at(index, position) {
+  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, position) {
+  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 = null;
+function toggle_header_button(col) {
+  if (active_button?.type === "header" && active_button.col === col) {
+    active_button = null;
+  } else {
+    active_button = { type: "header", col };
+  }
+}
+function toggle_cell_button(row, col) {
+  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 = null;
+function toggle_header_menu(event, col) {
+  event.stopPropagation();
+  if (active_header_menu && active_header_menu.col === col) {
+    active_header_menu = null;
+  } else {
+    const header = event.target.closest("th");
+    if (header) {
+      const rect = header.getBoundingClientRect();
+      active_header_menu = {
+        col,
+        x: rect.right,
+        y: rect.bottom
+      };
+    }
+  }
+}
 </script>
 
 <svelte:window
@@ -603,40 +687,58 @@ onMount(() => {
 							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}
@@ -647,11 +749,17 @@ onMount(() => {
 						<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
@@ -667,6 +775,17 @@ onMount(() => {
 									{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}
@@ -674,64 +793,35 @@ onMount(() => {
 			</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);
@@ -832,8 +922,9 @@ onMount(() => {
 	}
 
 	th.focus,
-	td.focus {
-		--ring-color: var(--color-accent);
+	td.focus,
+	td.menu-active {
+		z-index: 1;
 	}
 
 	tr:last-child td:first-child {
@@ -882,21 +973,22 @@ onMount(() => {
 	}
 
 	.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 {
@@ -910,4 +1002,45 @@ onMount(() => {
 	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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.11.0-beta.7",
+  "version": "0.11.0",
   "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.9.0-beta.4",
-    "@gradio/button": "^0.3.0-beta.6",
-    "@gradio/markdown": "^0.10.0-beta.4",
-    "@gradio/upload": "^0.13.0-beta.6",
-    "@gradio/utils": "^0.7.0-beta.2",
-    "@gradio/statustracker": "^0.8.0-beta.4",
-    "@gradio/client": "^1.6.0-beta.4"
+    "@gradio/atoms": "^0.9.0",
+    "@gradio/markdown": "^0.10.0",
+    "@gradio/button": "^0.3.0",
+    "@gradio/statustracker": "^0.8.0",
+    "@gradio/upload": "^0.13.0",
+    "@gradio/utils": "^0.7.0",
+    "@gradio/client": "^1.6.0"
   },
   "exports": {
     ".": {
@@ -42,7 +42,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.2-beta.0"
+    "@gradio/preview": "^0.12.0"
   },
   "repository": {
     "type": "git",

package/shared/Arrow.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let transform: string;
+</script>
+
+<svg viewBox="0 0 24 24" width="16" height="16">
+	<path
+		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+		{transform}
+	/>
+</svg>

package/shared/CellMenu.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import Arrow from "./Arrow.svelte";
+	import type { I18nFormatter } from "js/utils/src";
+
+	export let x: number;
+	export let y: number;
+	export let on_add_row_above: () => void;
+	export let on_add_row_below: () => void;
+	export let on_add_column_left: () => void;
+	export let on_add_column_right: () => void;
+	export let row: number;
+
+	export let i18n: I18nFormatter;
+	let menu_element: HTMLDivElement;
+
+	$: is_header = row === -1;
+
+	onMount(() => {
+		position_menu();
+	});
+
+	function position_menu(): void {
+		if (!menu_element) return;
+
+		const viewport_width = window.innerWidth;
+		const viewport_height = window.innerHeight;
+		const menu_rect = menu_element.getBoundingClientRect();
+
+		let new_x = x - 30;
+		let new_y = y - 20;
+
+		if (new_x + menu_rect.width > viewport_width) {
+			new_x = x - menu_rect.width + 10;
+		}
+
+		if (new_y + menu_rect.height > viewport_height) {
+			new_y = y - menu_rect.height + 10;
+		}
+
+		menu_element.style.left = `${new_x}px`;
+		menu_element.style.top = `${new_y}px`;
+	}
+</script>
+
+<div bind:this={menu_element} class="cell-menu">
+	{#if !is_header}
+		<button on:click={() => on_add_row_above()}>
+			<Arrow transform="rotate(-90 12 12)" />
+			{i18n("dataframe.add_row_above")}
+		</button>
+		<button on:click={() => on_add_row_below()}>
+			<Arrow transform="rotate(90 12 12)" />
+			{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>
+</div>
+
+<style>
+	.cell-menu {
+		position: fixed;
+		z-index: var(--layer-2);
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-1);
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-1);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 150px;
+	}
+
+	.cell-menu button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		padding: var(--size-1) var(--size-2);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.cell-menu button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.cell-menu button :global(svg) {
+		fill: currentColor;
+		transition: fill 0.2s;
+	}
+
+	.cell-menu button:hover :global(svg) {
+		fill: var(--color-accent);
+	}
+</style>