@gradio/dataframe 0.12.6 → 0.13.0

package/dist/shared/Table.svelte

@@ -1,12 +1,12 @@
-<script>import { createEventDispatcher, tick, onMount } from "svelte";
+<script>import { afterUpdate, createEventDispatcher, tick, onMount } from "svelte";
 import { dsvFormat } from "d3-dsv";
 import { dequal } from "dequal/lite";
-import { copy } from "@gradio/utils";
 import { Upload } from "@gradio/upload";
 import EditableCell from "./EditableCell.svelte";
 import {} from "@gradio/client";
 import VirtualTable from "./VirtualTable.svelte";
 import CellMenu from "./CellMenu.svelte";
+import Toolbar from "./Toolbar.svelte";
 export let datatype;
 export let label = null;
 export let show_label = true;
@@ -22,9 +22,13 @@ export let i18n;
 export let max_height = 500;
 export let line_breaks = true;
 export let column_widths = [];
+export let show_row_numbers = false;
 export let upload;
 export let stream_handler;
+export let show_fullscreen_button = false;
+export let value_is_output = false;
 let selected = false;
+let clicked_cell = void 0;
 export let display_value = null;
 export let styling = null;
 let t_rect;
@@ -86,30 +90,39 @@ function process_data(_values) {
   );
 }
 let _headers = make_headers(headers);
-let old_headers;
+let old_headers = headers;
 $: {
   if (!dequal(headers, old_headers)) {
-    trigger_headers();
+    _headers = make_headers(headers);
+    old_headers = JSON.parse(JSON.stringify(headers));
   }
 }
-function trigger_headers() {
-  _headers = make_headers(headers);
-  old_headers = headers.slice();
-  trigger_change();
-}
+let data = [[]];
+let old_val = void 0;
 $:
   if (!dequal(values, old_val)) {
     data = process_data(values);
-    old_val = values;
+    old_val = JSON.parse(JSON.stringify(values));
   }
-let data = [[]];
-let old_val = void 0;
+let previous_headers = _headers.map((h) => h.value);
+let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
 async function trigger_change() {
-  dispatch("change", {
-    data: data.map((r) => r.map(({ value }) => value)),
-    headers: _headers.map((h) => h.value),
-    metadata: editable ? null : { display_value, styling }
-  });
+  const current_headers = _headers.map((h) => h.value);
+  const current_data = data.map(
+    (row) => row.map((cell) => String(cell.value))
+  );
+  if (!dequal(current_data, previous_data) || !dequal(current_headers, previous_headers)) {
+    dispatch("change", {
+      data: data.map((row) => row.map((cell) => cell.value)),
+      headers: _headers.map((h) => h.value),
+      metadata: null
+    });
+    if (!value_is_output) {
+      dispatch("input");
+    }
+    previous_data = current_data;
+    previous_headers = current_headers;
+  }
 }
 function get_sort_status(name, _sort, direction) {
   if (!_sort)
@@ -134,11 +147,6 @@ function get_current_indices(id) {
     [-1, -1]
   );
 }
-async function start_edit(i, j) {
-  if (!editable || dequal(editing, [i, j]))
-    return;
-  editing = [i, j];
-}
 function move_cursor(key, current_coords) {
   const dir = {
     ArrowRight: [0, 1],
@@ -257,24 +265,6 @@ 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;
-  selected_header = false;
-  editing = false;
-  if (!dequal(selected, [i, j])) {
-    selected = [i, j];
-    await tick();
-    parent.focus();
-  }
-}
 let sort_direction;
 let sort_by;
 function handle_sort(col) {
@@ -337,7 +327,7 @@ async function add_row(index) {
   selected = [index !== void 0 ? index : data.length - 1, 0];
 }
 $:
-  (data || selected_header) && trigger_change();
+  (data || _headers) && trigger_change();
 async function add_col(index) {
   parent.focus();
   if (col_count[1] !== "dynamic")
@@ -363,16 +353,15 @@ function handle_click_outside(event) {
     active_cell_menu = null;
     active_header_menu = null;
   }
-  event.stopImmediatePropagation();
   const [trigger] = event.composedPath();
   if (parent.contains(trigger)) {
     return;
   }
+  clicked_cell = void 0;
   editing = false;
+  selected = false;
   header_edit = false;
   selected_header = false;
-  reset_selection();
-  active_cell = null;
   active_cell_menu = null;
   active_header_menu = null;
 }
@@ -421,6 +410,8 @@ function blob_to_string(blob) {
 }
 let dragging = false;
 function get_max(_d) {
+  if (!_d || _d.length === 0 || !_d[0])
+    return [];
   let max2 = _d[0].slice();
   for (let i = 0; i < _d.length; i++) {
     for (let j = 0; j < _d[i].length; j++) {
@@ -505,8 +496,17 @@ onMount(() => {
     });
   });
   observer.observe(parent);
+  document.addEventListener("click", handle_click_outside);
+  window.addEventListener("resize", handle_resize);
+  document.addEventListener("fullscreenchange", handle_fullscreen_change);
   return () => {
     observer.disconnect();
+    document.removeEventListener("click", handle_click_outside);
+    window.removeEventListener("resize", handle_resize);
+    document.removeEventListener(
+      "fullscreenchange",
+      handle_fullscreen_change
+    );
   };
 });
 let highlighted_column = null;
@@ -545,14 +545,6 @@ function handle_resize() {
   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;
 function toggle_header_button(col) {
   if (active_button?.type === "header" && active_button.col === col) {
@@ -569,6 +561,19 @@ function toggle_cell_button(row, col) {
   }
 }
 let active_header_menu = null;
+let is_fullscreen = false;
+function toggle_fullscreen() {
+  if (!document.fullscreenElement) {
+    parent.requestFullscreen();
+    is_fullscreen = true;
+  } else {
+    document.exitFullscreen();
+    is_fullscreen = false;
+  }
+}
+function handle_fullscreen_change() {
+  is_fullscreen = !!document.fullscreenElement;
+}
 function toggle_header_menu(event, col) {
   event.stopPropagation();
   if (active_header_menu && active_header_menu.col === col) {
@@ -585,24 +590,26 @@ function toggle_header_menu(event, col) {
     }
   }
 }
-function reset_selection() {
-  selected = false;
-  last_selected = null;
-}
+afterUpdate(() => {
+  value_is_output = false;
+});
 </script>
 
-<svelte:window
-	on:click={handle_click_outside}
-	on:touchstart={handle_click_outside}
-	on:resize={() => set_cell_widths()}
-/>
+<svelte:window on:resize={() => set_cell_widths()} />
 
-<div class:label={label && label.length !== 0} use:copy>
-	{#if label && label.length !== 0 && show_label}
-		<p>
-			{label}
-		</p>
-	{/if}
+<div class="table-container">
+	<div class="header-row">
+		{#if label && label.length !== 0 && show_label}
+			<div class="label">
+				<p>{label}</p>
+			</div>
+		{/if}
+		<Toolbar
+			{show_fullscreen_button}
+			{is_fullscreen}
+			on:click={toggle_fullscreen}
+		/>
+	</div>
 	<div
 		bind:this={parent}
 		class="table-wrap"
@@ -623,6 +630,9 @@ function reset_selection() {
 			{/if}
 			<thead>
 				<tr>
+					{#if show_row_numbers}
+						<th class="row-number-header"></th>
+					{/if}
 					{#each _headers as { value, id }, i (id)}
 						<th
 							class:editing={header_edit === i}
@@ -702,6 +712,9 @@ function reset_selection() {
 					<caption class="sr-only">{label}</caption>
 				{/if}
 				<tr slot="thead">
+					{#if show_row_numbers}
+						<th class="row-number-header"></th>
+					{/if}
 					{#each _headers as { value, id }, i (id)}
 						<th
 							class:focus={header_edit === i || selected_header === i}
@@ -721,17 +734,14 @@ function reset_selection() {
 										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
+									<button
 										class:sorted={sort_by === i}
 										class:des={sort_by === i && sort_direction === "des"}
 										class="sort-button {sort_direction}"
+										tabindex="0"
 										on:click={(event) => {
 											event.stopPropagation();
 											handle_sort(i);
@@ -746,7 +756,7 @@ function reset_selection() {
 										>
 											<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
 										</svg>
-									</div>
+									</button>
 								</div>
 
 								{#if editable}
@@ -763,15 +773,44 @@ function reset_selection() {
 				</tr>
 
 				<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
+					{#if show_row_numbers}
+						<td class="row-number" title={`Row ${index + 1}`}>{index + 1}</td>
+					{/if}
 					{#each item as { value, id }, j (id)}
 						<td
 							tabindex="0"
-							on:touchstart={() => start_edit(index, j)}
-							on:click={() => {
-								handle_cell_click(index, j);
+							on:touchstart={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								clear_on_focus = false;
+								clicked_cell = { row: index, col: j };
+								selected = [index, j];
+								selected_header = false;
+								header_edit = false;
+								if (editable) {
+									editing = [index, j];
+								}
+								toggle_cell_button(index, j);
+							}}
+							on:mousedown={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+							}}
+							on:click={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								clear_on_focus = false;
+								active_cell_menu = null;
+								active_header_menu = null;
+								clicked_cell = { row: index, col: j };
+								selected = [index, j];
+								selected_header = false;
+								header_edit = false;
+								if (editable) {
+									editing = [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])}
@@ -789,7 +828,10 @@ function reset_selection() {
 									{editable}
 									edit={dequal(editing, [index, j])}
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
-									on:blur={() => ((clear_on_focus = false), parent.focus())}
+									on:blur={() => {
+										clear_on_focus = false;
+										parent.focus();
+									}}
 									{clear_on_focus}
 									{root}
 								/>
@@ -1056,4 +1098,60 @@ function reset_selection() {
 		overflow-wrap: break-word;
 		word-break: break-word;
 	}
+
+	.table-container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+	}
+
+	.row-number,
+	.row-number-header {
+		width: var(--size-7);
+		min-width: var(--size-7);
+		text-align: center;
+		background: var(--table-even-background-fill);
+		position: sticky;
+		left: 0;
+		font-size: var(--input-text-size);
+		color: var(--body-text-color);
+		padding: var(--size-1) var(--size-2);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: var(--weight-semibold);
+	}
+
+	.row-number-header {
+		z-index: var(--layer-2);
+	}
+
+	.row-number {
+		z-index: var(--layer-1);
+	}
+
+	:global(tbody > tr:nth-child(odd)) .row-number {
+		background: var(--table-odd-background-fill);
+	}
+
+	.header-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--size-2);
+		height: var(--size-6);
+		min-height: var(--size-6);
+	}
+
+	.label {
+		flex: 1;
+	}
+
+	.label p {
+		position: relative;
+		z-index: var(--layer-4);
+		margin: 0;
+		color: var(--block-label-text-color);
+		font-size: var(--block-label-text-size);
+	}
 </style>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import { type Client } from "@gradio/client";
-import type { Headers, Metadata, Datatype } from "./utils";
+import type { Headers, DataframeValue, Datatype } from "./utils";
 declare const __propDef: {
     props: {
         datatype: Datatype | Datatype[];
@@ -24,17 +24,17 @@ declare const __propDef: {
         max_height?: number | undefined;
         line_breaks?: boolean | undefined;
         column_widths?: string[] | undefined;
+        show_row_numbers?: boolean | undefined;
         upload: Client["upload"];
         stream_handler: Client["stream"];
+        show_fullscreen_button?: boolean | undefined;
+        value_is_output?: boolean | undefined;
         display_value?: (string[][] | null) | undefined;
         styling?: (string[][] | null) | undefined;
     };
     events: {
-        change: CustomEvent<{
-            data: (string | number)[][];
-            headers: string[];
-            metadata: Metadata;
-        }>;
+        change: CustomEvent<DataframeValue>;
+        input: CustomEvent<undefined>;
         select: CustomEvent<SelectData>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/shared/Toolbar.svelte

@@ -0,0 +1,49 @@
+<script>import { Maximize, Minimize } from "@gradio/icons";
+export let show_fullscreen_button = false;
+export let is_fullscreen = false;
+</script>
+
+{#if show_fullscreen_button}
+	<div class="toolbar">
+		<button class="toolbar-button" on:click>
+			{#if is_fullscreen}
+				<Minimize />
+			{:else}
+				<Maximize />
+			{/if}
+		</button>
+	</div>
+{/if}
+
+<style>
+	.toolbar {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--size-1);
+	}
+
+	.toolbar-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-6);
+		height: var(--size-6);
+		padding: var(--size-1);
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--body-text-color-subdued);
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.toolbar-button:hover {
+		background: var(--background-fill-secondary);
+		color: var(--body-text-color);
+	}
+
+	.toolbar-button :global(svg) {
+		width: var(--size-4);
+		height: var(--size-4);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        show_fullscreen_button?: boolean | undefined;
+        is_fullscreen?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponent<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/dist/shared/utils.d.ts

@@ -8,3 +8,8 @@ export type HeadersWithIDs = {
     value: string;
     id: string;
 }[];
+export type DataframeValue = {
+    data: Data;
+    headers: Headers;
+    metadata: Metadata;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.13.0",
-    "@gradio/button": "^0.4.0",
+    "@gradio/atoms": "^0.13.1",
+    "@gradio/client": "^1.10.0",
+    "@gradio/button": "^0.4.2",
+    "@gradio/icons": "^0.10.0",
     "@gradio/markdown-code": "^0.3.0",
-    "@gradio/client": "^1.9.0",
-    "@gradio/upload": "^0.14.4",
-    "@gradio/statustracker": "^0.10.0",
-    "@gradio/utils": "^0.10.0"
+    "@gradio/statustracker": "^0.10.2",
+    "@gradio/utils": "^0.10.0",
+    "@gradio/upload": "^0.14.6"
   },
   "exports": {
     ".": {

package/shared/EditableCell.svelte

@@ -20,7 +20,6 @@
 		display: boolean;
 	}[];
 	export let clear_on_focus = false;
-	export let select_on_focus = false;
 	export let line_breaks = true;
 	export let editable = true;
 	export let root: string;
@@ -34,11 +33,10 @@
 		if (clear_on_focus) {
 			_value = "";
 		}
-		if (select_on_focus) {
-			node.select();
-		}
 
-		node.focus();
+		requestAnimationFrame(() => {
+			node.focus();
+		});
 
 		return {};
 	}
@@ -69,6 +67,9 @@
 		class:header
 		tabindex="-1"
 		on:blur={handle_blur}
+		on:mousedown|stopPropagation
+		on:mouseup|stopPropagation
+		on:click|stopPropagation
 		use:use_focus
 		on:keydown={handle_keydown}
 	/>
@@ -81,6 +82,8 @@
 	class:edit
 	on:focus|preventDefault
 	style={styling}
+	class="table-cell-text"
+	placeholder=" "
 >
 	{#if datatype === "html"}
 		{@html value}
@@ -109,6 +112,7 @@
 		outline: none;
 		border: none;
 		background: transparent;
+		cursor: text;
 	}
 
 	span {
@@ -119,11 +123,12 @@
 		-moz-user-select: text;
 		-ms-user-select: text;
 		user-select: text;
+		cursor: text;
 	}
 
 	.header {
 		transform: translateX(0);
-		font: var(--weight-bold);
+		font-weight: var(--weight-bold);
 	}
 
 	.edit {