@gradio/dataframe 0.16.5 → 0.17.1

package/shared/TableCell.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { Datatype } from "./utils";
+	import { is_cell_in_selection } from "./selection_utils";
+
+	export let value: string | number;
+	export let index: number;
+	export let j: number;
+	export let actual_pinned_columns: number;
+	export let get_cell_width: (index: number) => string;
+	export let handle_cell_click: (
+		event: MouseEvent,
+		row: number,
+		col: number
+	) => void;
+	export let toggle_cell_menu: (
+		event: MouseEvent,
+		row: number,
+		col: number
+	) => void;
+	export let is_cell_selected: (
+		coords: [number, number],
+		selected_cells: [number, number][]
+	) => string;
+	export let should_show_cell_menu: (
+		coords: [number, number],
+		selected_cells: [number, number][],
+		editable: boolean
+	) => boolean;
+	export let selected_cells: [number, number][];
+	export let copy_flash: boolean;
+	export let active_cell_menu: {
+		row: number;
+		col: number;
+		x: number;
+		y: number;
+	} | null;
+	export let styling: string | undefined;
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let line_breaks: boolean;
+	export let datatype: Datatype;
+	export let editing: [number, number] | false;
+	export let clear_on_focus: boolean;
+	export let max_chars: number | undefined;
+	export let root: string;
+	export let editable: boolean;
+	export let is_static = false;
+	export let i18n: I18nFormatter;
+	export let components: Record<string, any> = {};
+	export let el: {
+		cell: HTMLTableCellElement | null;
+		input: HTMLInputElement | null;
+	};
+	export let handle_select_column: (col: number) => void;
+	export let handle_select_row: (row: number) => void;
+	export let is_dragging: boolean;
+
+	function get_cell_position(col_index: number): string {
+		if (col_index >= actual_pinned_columns) {
+			return "auto";
+		}
+
+		if (col_index === 0) {
+			return "0";
+		}
+
+		const previous_widths = Array(col_index)
+			.fill(0)
+			.map((_, idx) => {
+				return get_cell_width(idx);
+			})
+			.join(" + ");
+
+		return `calc(${previous_widths})`;
+	}
+
+	$: cell_classes = is_cell_selected([index, j], selected_cells || []);
+	$: is_in_selection = is_cell_in_selection([index, j], selected_cells);
+	$: has_no_top = cell_classes.includes("no-top");
+	$: has_no_bottom = cell_classes.includes("no-bottom");
+	$: has_no_left = cell_classes.includes("no-left");
+	$: has_no_right = cell_classes.includes("no-right");
+</script>
+
+<td
+	class:pinned-column={j < actual_pinned_columns}
+	class:last-pinned={j === actual_pinned_columns - 1}
+	tabindex={j < actual_pinned_columns ? -1 : 0}
+	bind:this={el.cell}
+	data-row={index}
+	data-col={j}
+	data-testid={`cell-${index}-${j}`}
+	on:mousedown={(e) => handle_cell_click(e, index, j)}
+	on:contextmenu|preventDefault={(e) => toggle_cell_menu(e, index, j)}
+	style="width: {get_cell_width(j)}; left: {get_cell_position(j)}; {styling ||
+		''}"
+	class:flash={copy_flash && is_in_selection}
+	class:cell-selected={is_in_selection}
+	class:no-top={has_no_top}
+	class:no-bottom={has_no_bottom}
+	class:no-left={has_no_left}
+	class:no-right={has_no_right}
+	class:menu-active={active_cell_menu &&
+		active_cell_menu.row === index &&
+		active_cell_menu.col === j}
+	class:dragging={is_dragging}
+>
+	<div class="cell-wrap">
+		<EditableCell
+			bind:value
+			bind:el={el.input}
+			display_value={String(value)}
+			{latex_delimiters}
+			{line_breaks}
+			{editable}
+			{is_static}
+			edit={editing && editing[0] === index && editing[1] === j}
+			{datatype}
+			on:blur={() => {
+				clear_on_focus = false;
+			}}
+			on:focus={() => {
+				const row = index;
+				const col = j;
+				if (!selected_cells.some(([r, c]) => r === row && c === col)) {
+					selected_cells = [[row, col]];
+				}
+			}}
+			{clear_on_focus}
+			{root}
+			{max_chars}
+			{i18n}
+			{components}
+			show_selection_buttons={selected_cells.length === 1 &&
+				selected_cells[0][0] === index &&
+				selected_cells[0][1] === j}
+			coords={[index, j]}
+			on_select_column={handle_select_column}
+			on_select_row={handle_select_row}
+			{is_dragging}
+		/>
+		{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
+			<CellMenuButton on_click={(event) => toggle_cell_menu(event, index, j)} />
+		{/if}
+	</div>
+</td>
+
+<style>
+	td {
+		--ring-color: transparent;
+		position: relative;
+		outline: none;
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		border-right-width: 0px;
+		border-left-width: 1px;
+		border-style: solid;
+		border-color: var(--border-color-primary);
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		margin: 0;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		border-radius: var(--table-radius);
+	}
+
+	.cell-selected {
+		--ring-color: var(--color-accent);
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+		z-index: 2;
+		position: relative;
+	}
+
+	.cell-selected :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.flash.cell-selected {
+		animation: flash-color 700ms ease-out;
+	}
+
+	@keyframes flash-color {
+		0%,
+		30% {
+			background: var(--color-accent-copied);
+		}
+
+		100% {
+			background: transparent;
+		}
+	}
+
+	.pinned-column {
+		position: sticky;
+		z-index: 3;
+		border-right: none;
+	}
+
+	.pinned-column:nth-child(odd) {
+		background: var(--table-odd-background-fill);
+	}
+
+	.pinned-column:nth-child(even) {
+		background: var(--table-even-background-fill);
+	}
+
+	td:first-child {
+		border-left-width: 0px;
+	}
+
+	:global(tr:last-child) td:first-child {
+		border-bottom-left-radius: var(--table-radius);
+	}
+
+	:global(tr:last-child) td:last-child {
+		border-bottom-right-radius: var(--table-radius);
+	}
+
+	.dragging {
+		cursor: crosshair;
+	}
+
+	/* Add back the cell selection border styles */
+	.cell-selected.no-top {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-right {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset 2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-left {
+		box-shadow:
+			inset -2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-right {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-left {
+		box-shadow:
+			inset -2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-right {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-bottom {
+		box-shadow:
+			inset 2px 0 0 var(--ring-color),
+			inset -2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left.no-right {
+		box-shadow:
+			inset 0 2px 0 var(--ring-color),
+			inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-left.no-right {
+		box-shadow: inset 0 -2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-bottom.no-left.no-right {
+		box-shadow: inset 0 2px 0 var(--ring-color);
+	}
+
+	.cell-selected.no-left.no-top.no-bottom {
+		box-shadow: inset -2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-right.no-top.no-bottom {
+		box-shadow: inset 2px 0 0 var(--ring-color);
+	}
+
+	.cell-selected.no-top.no-bottom.no-left.no-right {
+		box-shadow: none;
+	}
+</style>

package/shared/TableHeader.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { SortDirection } from "./context/table_context";
+	import Padlock from "./icons/Padlock.svelte";
+	import SortArrowUp from "./icons/SortArrowUp.svelte";
+	import SortArrowDown from "./icons/SortArrowDown.svelte";
+
+	export let value: string;
+	export let i: number;
+	export let actual_pinned_columns: number;
+	export let header_edit: number | false;
+	export let selected_header: number | false;
+	export let get_sort_status: (
+		value: string,
+		headers: string[]
+	) => "none" | "asc" | "desc";
+	export let headers: string[];
+	export let get_cell_width: (index: number) => string;
+	export let handle_header_click: (event: MouseEvent, col: number) => void;
+	export let toggle_header_menu: (event: MouseEvent, col: number) => void;
+	export let end_header_edit: (event: CustomEvent<KeyboardEvent>) => void;
+	export let sort_columns: { col: number; direction: SortDirection }[] = [];
+
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let line_breaks: boolean;
+	export let max_chars: number | undefined;
+	export let root: string;
+	export let editable: boolean;
+	export let i18n: I18nFormatter;
+	export let el: HTMLInputElement | null;
+	export let is_static: boolean;
+	export let col_count: [number, "fixed" | "dynamic"];
+
+	$: can_add_columns = col_count && col_count[1] === "dynamic";
+	$: sort_index = sort_columns.findIndex((item) => item.col === i);
+	$: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
+	$: current_direction =
+		sort_index !== -1 ? sort_columns[sort_index].direction : null;
+
+	function get_header_position(col_index: number): string {
+		if (col_index >= actual_pinned_columns) {
+			return "auto";
+		}
+
+		if (col_index === 0) {
+			return "0";
+		}
+
+		const previous_widths = Array(col_index)
+			.fill(0)
+			.map((_, idx) => {
+				return get_cell_width(idx);
+			})
+			.join(" + ");
+
+		return `calc(${previous_widths})`;
+	}
+</script>
+
+<th
+	class:pinned-column={i < actual_pinned_columns}
+	class:last-pinned={i === actual_pinned_columns - 1}
+	class:focus={header_edit === i || selected_header === i}
+	class:sorted={sort_index !== -1}
+	aria-sort={get_sort_status(value, headers) === "none"
+		? "none"
+		: get_sort_status(value, headers) === "asc"
+			? "ascending"
+			: "descending"}
+	style="width: {get_cell_width(i)}; left: {get_header_position(i)};"
+	on:click={(event) => handle_header_click(event, i)}
+	on:mousedown={(event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	}}
+	title={value}
+>
+	<div class="cell-wrap">
+		<div class="header-content">
+			<button
+				class="header-button"
+				on:click={(event) => handle_header_click(event, i)}
+				on:mousedown={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}}
+				title={value}
+			>
+				<EditableCell
+					{max_chars}
+					bind:value
+					bind:el
+					{latex_delimiters}
+					{line_breaks}
+					edit={header_edit === i}
+					on:keydown={(event) => {
+						if (
+							event.detail.key === "Enter" ||
+							event.detail.key === "Escape" ||
+							event.detail.key === "Tab"
+						) {
+							end_header_edit(event);
+						}
+					}}
+					header
+					{root}
+					{editable}
+					{is_static}
+					{i18n}
+				/>
+				{#if sort_index !== -1}
+					<div class="sort-indicators">
+						<span class="sort-arrow">
+							{#if current_direction === "asc"}
+								<SortArrowUp size={12} />
+							{:else}
+								<SortArrowDown size={12} />
+							{/if}
+						</span>
+						{#if sort_columns.length > 1}
+							<span class="sort-priority">
+								{sort_priority}
+							</span>
+						{/if}
+					</div>
+				{/if}
+			</button>
+			{#if is_static}
+				<Padlock />
+			{/if}
+		</div>
+		{#if can_add_columns}
+			<CellMenuButton on_click={(event) => toggle_header_menu(event, i)} />
+		{/if}
+	</div>
+</th>
+
+<style>
+	th {
+		--ring-color: transparent;
+		position: relative;
+		outline: none;
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		background: var(--table-even-background-fill);
+		border-right-width: 0px;
+		border-left-width: 1px;
+		border-style: solid;
+		border-color: var(--border-color-primary);
+	}
+
+	th:first-child {
+		border-top-left-radius: var(--table-radius);
+		border-bottom-left-radius: var(--table-radius);
+		border-left-width: 0px;
+	}
+
+	th:last-child {
+		border-top-right-radius: var(--table-radius);
+		border-bottom-right-radius: var(--table-radius);
+	}
+
+	th.focus {
+		--ring-color: var(--color-accent);
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+		z-index: 4;
+	}
+
+	th.focus :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	th:hover :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		margin: 0;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		border-radius: var(--table-radius);
+	}
+
+	.header-content {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		flex-grow: 1;
+		min-width: 0;
+		white-space: normal;
+		overflow-wrap: break-word;
+		word-break: normal;
+		height: 100%;
+		gap: var(--size-1);
+	}
+
+	.header-button {
+		display: flex;
+		text-align: left;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	.sort-indicators {
+		display: flex;
+		align-items: center;
+		margin-left: var(--size-1);
+		gap: var(--size-1);
+	}
+
+	.sort-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--body-text-color);
+	}
+
+	.sort-priority {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--size-2);
+		background-color: var(--button-secondary-background-fill);
+		color: var(--body-text-color);
+		border-radius: var(--radius-sm);
+		width: var(--size-2-5);
+		height: var(--size-2-5);
+		padding: var(--size-1-5);
+	}
+
+	.pinned-column {
+		position: sticky;
+		z-index: 5;
+		border-right: none;
+	}
+</style>

package/shared/Toolbar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { Maximize, Minimize, Copy } from "@gradio/icons";
+	import { Maximize, Minimize, Copy, Check } 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;
@@ -18,8 +17,17 @@
 	let copied = false;
 	let timer: ReturnType<typeof setTimeout>;
 	export let current_search_query: string | null = null;
-
-	$: dispatch("search", current_search_query);
+	let input_value = "";
+
+	function handle_search_input(e: Event): void {
+		const target = e.target as HTMLInputElement;
+		input_value = target.value;
+		const new_query = input_value || null;
+		if (current_search_query !== new_query) {
+			current_search_query = new_query;
+			dispatch("search", current_search_query);
+		}
+	}
 
 	function copy_feedback(): void {
 		copied = true;
@@ -45,9 +53,12 @@
 			<div class="search-container">
 				<input
 					type="text"
-					bind:value={current_search_query}
-					placeholder="Search..."
+					value={current_search_query || ""}
+					on:input={handle_search_input}
+					placeholder={show_search === "filter" ? "Filter..." : "Search..."}
 					class="search-input"
+					class:filter-mode={show_search === "filter"}
+					title={`Enter text to ${show_search} the table`}
 				/>
 				{#if current_search_query && show_search === "filter"}
 					<button
@@ -56,7 +67,7 @@
 						aria-label="Apply filter and update dataframe values"
 						title="Apply filter and update dataframe values"
 					>
-						<FilterIcon />
+						<Check />
 					</button>
 				{/if}
 			</div>
@@ -69,7 +80,7 @@
 				title={copied ? "Copied to clipboard" : "Copy table data"}
 			>
 				{#if copied}
-					<FilterIcon />
+					<Check />
 				{:else}
 					<Copy />
 				{/if}