@gradio/dataframe 0.14.0 → 0.16.0

package/shared/Toolbar.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
-	import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+	import { Maximize, Minimize, Copy } from "@gradio/icons";
 	import { onDestroy } from "svelte";
+	import { createEventDispatcher } from "svelte";
+	import FilterIcon from "./icons/FilterIcon.svelte";
 
 	export let show_fullscreen_button = false;
 	export let show_copy_button = false;
+	export let show_search: "none" | "search" | "filter" = "none";
 	export let is_fullscreen = false;
 	export let on_copy: () => Promise<void>;
+	export let on_commit_filter: () => void;
+
+	const dispatch = createEventDispatcher<{
+		search: string | null;
+	}>();
 
 	let copied = false;
 	let timer: ReturnType<typeof setTimeout>;
+	export let current_search_query: string | null = null;
+
+	$: dispatch("search", current_search_query);
 
 	function copy_feedback(): void {
 		copied = true;
@@ -29,41 +40,70 @@
 </script>
 
 <div class="toolbar" role="toolbar" aria-label="Table actions">
-	{#if show_copy_button}
-		<button
-			class="toolbar-button"
-			on:click={handle_copy}
-			aria-label={copied ? "Copied to clipboard" : "Copy table data"}
-			title={copied ? "Copied to clipboard" : "Copy table data"}
-		>
-			{#if copied}
-				<Check />
-			{:else}
-				<Copy />
-			{/if}
-		</button>
-	{/if}
-	{#if show_fullscreen_button}
-		<button
-			class="toolbar-button"
-			on:click
-			aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-			title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-		>
-			{#if is_fullscreen}
-				<Minimize />
-			{:else}
-				<Maximize />
-			{/if}
-		</button>
-	{/if}
+	<div class="toolbar-buttons">
+		{#if show_search !== "none"}
+			<div class="search-container">
+				<input
+					type="text"
+					bind:value={current_search_query}
+					placeholder="Search..."
+					class="search-input"
+				/>
+				{#if current_search_query && show_search === "filter"}
+					<button
+						class="toolbar-button check-button"
+						on:click={on_commit_filter}
+						aria-label="Apply filter and update dataframe values"
+						title="Apply filter and update dataframe values"
+					>
+						<FilterIcon />
+					</button>
+				{/if}
+			</div>
+		{/if}
+		{#if show_copy_button}
+			<button
+				class="toolbar-button"
+				on:click={handle_copy}
+				aria-label={copied ? "Copied to clipboard" : "Copy table data"}
+				title={copied ? "Copied to clipboard" : "Copy table data"}
+			>
+				{#if copied}
+					<FilterIcon />
+				{:else}
+					<Copy />
+				{/if}
+			</button>
+		{/if}
+		{#if show_fullscreen_button}
+			<button
+				class="toolbar-button"
+				on:click
+				aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+				title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+			>
+				{#if is_fullscreen}
+					<Minimize />
+				{:else}
+					<Maximize />
+				{/if}
+			</button>
+		{/if}
+	</div>
 </div>
 
 <style>
 	.toolbar {
 		display: flex;
-		justify-content: flex-end;
+		align-items: center;
+		gap: var(--size-2);
+		flex: 0 0 auto;
+	}
+
+	.toolbar-buttons {
+		display: flex;
 		gap: var(--size-1);
+		flex-wrap: nowrap;
 	}
 
 	.toolbar-button {
@@ -90,4 +130,59 @@
 		width: var(--size-4);
 		height: var(--size-4);
 	}
+
+	.search-container {
+		position: relative;
+	}
+
+	.search-input {
+		width: var(--size-full);
+		height: var(--size-6);
+		padding: var(--size-2);
+		padding-right: var(--size-8);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		background: var(--background-fill-secondary);
+		transition: all 0.2s ease;
+	}
+
+	.search-input:hover {
+		border-color: var(--border-color-secondary);
+		background: var(--background-fill-primary);
+	}
+
+	.search-input:focus {
+		outline: none;
+		border-color: var(--color-accent);
+		background: var(--background-fill-primary);
+		box-shadow: 0 0 0 1px var(--color-accent);
+	}
+
+	.check-button {
+		position: absolute;
+		right: var(--size-1);
+		top: 50%;
+		transform: translateY(-50%);
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		width: var(--size-4);
+		height: var(--size-4);
+		border-radius: var(--radius-sm);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--size-1);
+	}
+
+	.check-button :global(svg) {
+		width: var(--size-3);
+		height: var(--size-3);
+	}
+
+	.check-button:hover {
+		background: var(--color-accent-soft);
+	}
 </style>

package/shared/VirtualTable.svelte

@@ -10,6 +10,7 @@
 	export let start = 0;
 	export let end = 20;
 	export let selected: number | false;
+	export let disable_scroll = false;
 	let height = "100%";
 
 	let average_height = 30;
@@ -41,6 +42,11 @@
 			return;
 		}
 
+		// force header height calculation first
+		head_height =
+			viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
+		await tick();
+
 		const { scrollTop } = viewport;
 		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
@@ -256,29 +262,32 @@
 </script>
 
 <svelte-virtual-table-viewport>
-	<table
-		class="table"
-		bind:this={viewport}
-		bind:contentRect={viewport_box}
-		on:scroll={handle_scroll}
-		style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px"
-	>
-		<thead class="thead" bind:offsetHeight={head_height}>
-			<slot name="thead" />
-		</thead>
-		<tbody bind:this={contents} class="tbody">
-			{#if visible.length && visible[0].data.length}
-				{#each visible as item (item.data[0].id)}
-					<slot name="tbody" item={item.data} index={item.index}>
-						Missing Table Row
-					</slot>
-				{/each}
-			{/if}
-		</tbody>
-		<tfoot class="tfoot" bind:offsetHeight={foot_height}>
-			<slot name="tfoot" />
-		</tfoot>
-	</table>
+	<div>
+		<table
+			class="table"
+			class:disable-scroll={disable_scroll}
+			bind:this={viewport}
+			bind:contentRect={viewport_box}
+			on:scroll={handle_scroll}
+			style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px; --max-height: {max_height}px"
+		>
+			<thead class="thead" bind:offsetHeight={head_height}>
+				<slot name="thead" />
+			</thead>
+			<tbody bind:this={contents} class="tbody">
+				{#if visible.length && visible[0].data.length}
+					{#each visible as item (item.data[0].id)}
+						<slot name="tbody" item={item.data} index={item.index}>
+							Missing Table Row
+						</slot>
+					{/each}
+				{/if}
+			</tbody>
+			<tfoot class="tfoot" bind:offsetHeight={foot_height}>
+				<slot name="tfoot" />
+			</tfoot>
+		</table>
+	</div>
 </svelte-virtual-table-viewport>
 
 <style type="text/css">
@@ -287,7 +296,7 @@
 		overflow-y: scroll;
 		overflow-x: scroll;
 		-webkit-overflow-scrolling: touch;
-		max-height: 100vh;
+		max-height: var(--max-height);
 		box-sizing: border-box;
 		display: block;
 		padding: 0;
@@ -335,11 +344,49 @@
 		background: var(--table-even-background-fill);
 	}
 
+	tbody :global(td.frozen-column) {
+		position: sticky;
+		z-index: var(--layer-2);
+	}
+
+	tbody :global(tr:nth-child(odd)) :global(td.frozen-column) {
+		background: var(--table-odd-background-fill);
+	}
+
+	tbody :global(tr:nth-child(even)) :global(td.frozen-column) {
+		background: var(--table-even-background-fill);
+	}
+
+	tbody :global(td.always-frozen) {
+		z-index: var(--layer-3);
+	}
+
+	tbody :global(td.last-frozen) {
+		border-right: 2px solid var(--border-color-primary);
+	}
+
 	thead {
 		position: sticky;
 		top: 0;
 		left: 0;
-		z-index: var(--layer-1);
-		overflow: hidden;
+		z-index: var(--layer-3);
+		background: var(--background-fill-primary);
+	}
+
+	thead :global(th) {
+		background: var(--table-even-background-fill) !important;
+	}
+
+	thead :global(th.frozen-column) {
+		position: sticky;
+		z-index: var(--layer-4);
+	}
+
+	thead :global(th.always-frozen) {
+		z-index: var(--layer-5);
+	}
+
+	.table.disable-scroll {
+		overflow: hidden !important;
 	}
 </style>

package/shared/icons/FilterIcon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M4 4h16v2.67l-6.67 6.67v8L9.33 19v-5.66L2.67 6.67V4h1.33z"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/shared/icons/SortIcon.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	type SortDirection = "asc" | "des";
+	export let direction: SortDirection | null = null;
+	export let i18n: I18nFormatter;
+
+	const dispatch = createEventDispatcher<{ sort: SortDirection }>();
+</script>
+
+<div class="sort-icons" role="group" aria-label={i18n("dataframe.sort_column")}>
+	<button
+		class="sort-button up"
+		class:active={direction === "asc"}
+		on:click={() => dispatch("sort", "asc")}
+		aria-label={i18n("dataframe.sort_ascending")}
+		aria-pressed={direction === "asc"}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path
+				d="M7 14l5-5 5 5"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</button>
+	<button
+		class="sort-button down"
+		class:active={direction === "des"}
+		on:click={() => dispatch("sort", "des")}
+		aria-label={i18n("dataframe.sort_descending")}
+		aria-pressed={direction === "des"}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path
+				d="M7 10l5 5 5-5"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.sort-icons {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		margin-right: var(--spacing-md);
+	}
+
+	.sort-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		opacity: 0.5;
+		transition: opacity 150ms;
+	}
+
+	.sort-button:hover {
+		opacity: 0.8;
+	}
+
+	.sort-button.active {
+		opacity: 1;
+		color: var(--color-accent);
+	}
+
+	svg {
+		width: var(--size-3);
+		height: var(--size-3);
+		display: block;
+	}
+</style>

package/shared/selection_utils.ts

@@ -0,0 +1,230 @@
+import type { CellCoordinate, EditingState } from "./types";
+
+export type CellData = { id: string; value: string | number };
+
+export function is_cell_selected(
+	cell: CellCoordinate,
+	selected_cells: CellCoordinate[]
+): string {
+	const [row, col] = cell;
+	if (!selected_cells.some(([r, c]) => r === row && c === col)) return "";
+
+	const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
+	const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+	const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
+	const right = selected_cells.some(([r, c]) => r === row && c === col + 1);
+
+	return `cell-selected${up ? " no-top" : ""}${down ? " no-bottom" : ""}${left ? " no-left" : ""}${right ? " no-right" : ""}`;
+}
+
+export function get_range_selection(
+	start: CellCoordinate,
+	end: CellCoordinate
+): CellCoordinate[] {
+	const [start_row, start_col] = start;
+	const [end_row, end_col] = end;
+	const min_row = Math.min(start_row, end_row);
+	const max_row = Math.max(start_row, end_row);
+	const min_col = Math.min(start_col, end_col);
+	const max_col = Math.max(start_col, end_col);
+
+	const cells: CellCoordinate[] = [];
+	for (let i = min_row; i <= max_row; i++) {
+		for (let j = min_col; j <= max_col; j++) {
+			cells.push([i, j]);
+		}
+	}
+	return cells;
+}
+
+export function handle_selection(
+	current: CellCoordinate,
+	selected_cells: CellCoordinate[],
+	event: { shiftKey: boolean; metaKey: boolean; ctrlKey: boolean }
+): CellCoordinate[] {
+	if (event.shiftKey && selected_cells.length > 0) {
+		return get_range_selection(
+			selected_cells[selected_cells.length - 1],
+			current
+		);
+	}
+
+	if (event.metaKey || event.ctrlKey) {
+		const is_cell_match = ([r, c]: CellCoordinate): boolean =>
+			r === current[0] && c === current[1];
+		const index = selected_cells.findIndex(is_cell_match);
+		return index === -1
+			? [...selected_cells, current]
+			: selected_cells.filter((_, i) => i !== index);
+	}
+
+	return [current];
+}
+
+export function handle_delete_key(
+	data: CellData[][],
+	selected_cells: CellCoordinate[]
+): CellData[][] {
+	const new_data = data.map((row) => [...row]);
+	selected_cells.forEach(([row, col]) => {
+		if (new_data[row] && new_data[row][col]) {
+			new_data[row][col] = { ...new_data[row][col], value: "" };
+		}
+	});
+	return new_data;
+}
+
+export function handle_editing_state(
+	current: CellCoordinate,
+	editing: EditingState,
+	selected_cells: CellCoordinate[],
+	editable: boolean
+): EditingState {
+	const [row, col] = current;
+	if (!editable) return false;
+
+	if (editing && editing[0] === row && editing[1] === col) return editing;
+
+	if (
+		selected_cells.length === 1 &&
+		selected_cells[0][0] === row &&
+		selected_cells[0][1] === col
+	) {
+		return [row, col];
+	}
+
+	return false;
+}
+
+export function should_show_cell_menu(
+	cell: CellCoordinate,
+	selected_cells: CellCoordinate[],
+	editable: boolean
+): boolean {
+	const [row, col] = cell;
+	return (
+		editable &&
+		selected_cells.length === 1 &&
+		selected_cells[0][0] === row &&
+		selected_cells[0][1] === col
+	);
+}
+
+export function get_next_cell_coordinates(
+	current: CellCoordinate,
+	data: CellData[][],
+	shift_key: boolean
+): CellCoordinate | false {
+	const [row, col] = current;
+	const direction = shift_key ? -1 : 1;
+
+	if (data[row]?.[col + direction]) {
+		return [row, col + direction];
+	}
+
+	const next_row = row + (direction > 0 ? 1 : 0);
+	const prev_row = row + (direction < 0 ? -1 : 0);
+
+	if (direction > 0 && data[next_row]?.[0]) {
+		return [next_row, 0];
+	}
+
+	if (direction < 0 && data[prev_row]?.[data[0].length - 1]) {
+		return [prev_row, data[0].length - 1];
+	}
+
+	return false;
+}
+
+export function move_cursor(
+	key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
+	current_coords: CellCoordinate,
+	data: CellData[][]
+): CellCoordinate | false {
+	const dir = {
+		ArrowRight: [0, 1],
+		ArrowLeft: [0, -1],
+		ArrowDown: [1, 0],
+		ArrowUp: [-1, 0]
+	}[key];
+
+	const i = current_coords[0] + dir[0];
+	const j = current_coords[1] + dir[1];
+
+	if (i < 0 && j <= 0) {
+		return false;
+	}
+
+	const is_data = data[i]?.[j];
+	if (is_data) {
+		return [i, j];
+	}
+	return false;
+}
+
+export function get_current_indices(
+	id: string,
+	data: CellData[][]
+): [number, number] {
+	return data.reduce(
+		(acc, arr, i) => {
+			const j = arr.reduce(
+				(_acc, _data, k) => (id === _data.id ? k : _acc),
+				-1
+			);
+			return j === -1 ? acc : [i, j];
+		},
+		[-1, -1]
+	);
+}
+
+export function handle_click_outside(
+	event: Event,
+	parent: HTMLElement
+): boolean {
+	const [trigger] = event.composedPath() as HTMLElement[];
+	return !parent.contains(trigger);
+}
+
+export function select_column(data: any[][], col: number): CellCoordinate[] {
+	return Array.from({ length: data.length }, (_, i) => [i, col]);
+}
+
+export function select_row(data: any[][], row: number): CellCoordinate[] {
+	return Array.from({ length: data[0].length }, (_, i) => [row, i]);
+}
+
+export function calculate_selection_positions(
+	selected: CellCoordinate,
+	data: { id: string; value: string | number }[][],
+	els: Record<string, { cell: HTMLTableCellElement | null }>,
+	parent: HTMLElement,
+	table: HTMLElement
+): { col_pos: string; row_pos: string | undefined } {
+	const [row, col] = selected;
+	if (!data[row]?.[col]) {
+		return { col_pos: "0px", row_pos: undefined };
+	}
+
+	let offset = 0;
+	for (let i = 0; i < col; i++) {
+		offset += parseFloat(
+			getComputedStyle(parent).getPropertyValue(`--cell-width-${i}`)
+		);
+	}
+
+	const cell_id = data[row][col].id;
+	const cell_el = els[cell_id]?.cell;
+
+	if (!cell_el) {
+		// if we cant get the row position, just return the column position which is static
+		return { col_pos: "0px", row_pos: undefined };
+	}
+
+	const cell_rect = cell_el.getBoundingClientRect();
+	const table_rect = table.getBoundingClientRect();
+	const col_pos = `${cell_rect.left - table_rect.left + cell_rect.width / 2}px`;
+	const relative_top = cell_rect.top - table_rect.top;
+	const row_pos = `${relative_top + cell_rect.height / 2}px`;
+	return { col_pos, row_pos };
+}

package/shared/types.ts

@@ -0,0 +1,29 @@
+export type CellCoordinate = [number, number];
+export type EditingState = CellCoordinate | false;
+
+export type Headers = (string | null)[];
+
+export interface HeadersWithIDs {
+	id: string;
+	value: string;
+}
+[];
+
+export interface TableCell {
+	id: string;
+	value: string | number;
+}
+
+export type TableData = TableCell[][];
+
+export type CountConfig = [number, "fixed" | "dynamic"];
+
+export type ElementRefs = Record<
+	string,
+	{
+		cell: null | HTMLTableCellElement;
+		input: null | HTMLInputElement;
+	}
+>;
+
+export type DataBinding = Record<string, TableCell>;