gradio/js/dataframe/shared/Table.svelte

<script lang="ts">
	import { 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 { BaseButton } from "@gradio/button/static";
	import EditableCell from "./EditableCell.svelte";
	import type { SelectData } from "@gradio/utils";
	import { _ } from "svelte-i18n";
	import VirtualTable from "./VirtualTable.svelte";

	type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";

	export let datatype: Datatype | Datatype[];
	export let label: string | null = null;
	export let headers: string[] = [];
	export let values:
		| (string | number)[][]
		| { data: (string | number)[][]; headers: string[] } = [[]];
	export let col_count: [number, "fixed" | "dynamic"];
	export let row_count: [number, "fixed" | "dynamic"];
	export let latex_delimiters: {
		left: string;
		right: string;
		display: boolean;
	}[];

	export let editable = true;
	export let wrap = false;
	export let height: number | undefined;
	let selected: false | [number, number] = false;

	$: {
		if (values && !Array.isArray(values)) {
			headers = values.headers;
			values = values.data;
		} else if (values === null) {
			values = [];
		}
	}

	const dispatch = createEventDispatcher<{
		change: { data: (string | number)[][]; headers: string[] };
		select: SelectData;
	}>();

	let editing: false | [number, number] = false;

	const get_data_at = (row: number, col: number): string | number =>
		data?.[row]?.[col]?.value;
	$: {
		if (selected !== false) {
			const [row, col] = selected;
			if (!isNaN(row) && !isNaN(col)) {
				dispatch("select", { index: [row, col], value: get_data_at(row, col) });
			}
		}
	}
	let els: Record<
		string,
		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
	> = {};

	let data_binding: Record<string, (typeof data)[0][0]> = {};

	type Headers = { value: string; id: string }[];

	function make_id(): string {
		return Math.random().toString(36).substring(2, 15);
	}
	function make_headers(_head: string[]): Headers {
		let _h = _head || [];
		if (col_count[1] === "fixed" && _h.length < col_count[0]) {
			const fill = Array(col_count[0] - _h.length)
				.fill("")
				.map((_, i) => `${i + _h.length}`);
			_h = _h.concat(fill);
		}

		if (!_h || _h.length === 0) {
			return Array(col_count[0])
				.fill(0)
				.map((_, i) => {
					const _id = make_id();
					els[_id] = { cell: null, input: null };
					return { id: _id, value: JSON.stringify(i + 1) };
				});
		}
		return _h.map((h, i) => {
			const _id = make_id();
			els[_id] = { cell: null, input: null };
			return { id: _id, value: h ?? "" };
		});
	}

	function process_data(_values: (string | number)[][]): {
		value: string | number;
		id: string;
	}[][] {
		const data_row_length = _values.length;
		return Array(
			row_count[1] === "fixed"
				? row_count[0]
				: data_row_length < row_count[0]
				? row_count[0]
				: data_row_length
		)
			.fill(0)
			.map((_, i) =>
				Array(
					col_count[1] === "fixed"
						? col_count[0]
						: data_row_length > 0
						? _values[0].length
						: headers.length
				)
					.fill(0)
					.map((_, j) => {
						const id = make_id();
						els[id] = els[id] || { input: null, cell: null };
						const obj = { value: _values?.[i]?.[j] ?? "", id };
						data_binding[id] = obj;
						return obj;
					})
			);
	}

	let _headers = make_headers(headers);
	let old_headers: string[] | undefined;

	$: {
		if (!dequal(headers, old_headers)) {
			trigger_headers();
		}
	}

	function trigger_headers(): void {
		_headers = make_headers(headers);

		old_headers = headers.slice();
	}
	$: if (!dequal(values, old_val)) {
		data = process_data(values as (string | number)[][]);
		old_val = values as (string | number)[][];
	}

	let data: { id: string; value: string | number }[][] = [[]];

	let old_val: undefined | (string | number)[][] = undefined;

	$: _headers &&
		dispatch("change", {
			data: data.map((r) => r.map(({ value }) => value)),
			headers: _headers.map((h) => h.value)
		});

	function get_sort_status(
		name: string,
		_sort?: number,
		direction?: SortDirection
	): "none" | "ascending" | "descending" {
		if (!_sort) return "none";
		if (headers[_sort] === name) {
			if (direction === "asc") return "ascending";
			if (direction === "des") return "descending";
		}

		return "none";
	}

	function get_current_indices(id: string): [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]
		);
	}

	async function start_edit(i: number, j: number): Promise<void> {
		if (!editable || dequal(editing, [i, j])) return;

		editing = [i, j];
	}

	function move_cursor(
		key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
		current_coords: [number, number]
	): void {
		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) {
			selected_header = j;
			selected = false;
		} else {
			const is_data = data[i]?.[j];
			selected = is_data ? [i, j] : selected;
		}
	}

	let clear_on_focus = false;
	// eslint-disable-next-line complexity
	async function handle_keydown(event: KeyboardEvent): Promise<void> {
		if (selected_header !== false && header_edit === false) {
			switch (event.key) {
				case "ArrowDown":
					selected = [0, selected_header];
					selected_header = false;
					return;
				case "ArrowLeft":
					selected_header =
						selected_header > 0 ? selected_header - 1 : selected_header;
					return;
				case "ArrowRight":
					selected_header =
						selected_header < _headers.length - 1
							? selected_header + 1
							: selected_header;
					return;
				case "Escape":
					event.preventDefault();
					selected_header = false;
					break;
				case "Enter":
					event.preventDefault();
					break;
			}
		}
		if (!selected) {
			return;
		}

		const [i, j] = selected;

		switch (event.key) {
			case "ArrowRight":
			case "ArrowLeft":
			case "ArrowDown":
			case "ArrowUp":
				if (editing) break;
				event.preventDefault();
				move_cursor(event.key, [i, j]);
				break;

			case "Escape":
				if (!editable) break;
				event.preventDefault();
				editing = false;
				break;
			case "Enter":
				if (!editable) break;
				event.preventDefault();

				if (event.shiftKey) {
					add_row(i);
					await tick();

					selected = [i + 1, j];
				} else {
					if (dequal(editing, [i, j])) {
						editing = false;
						await tick();
						selected = [i, j];
					} else {
						editing = [i, j];
					}
				}

				break;
			case "Backspace":
				if (!editable) break;
				if (!editing) {
					event.preventDefault();
					data[i][j].value = "";
				}
				break;
			case "Delete":
				if (!editable) break;
				if (!editing) {
					event.preventDefault();
					data[i][j].value = "";
				}
				break;
			case "Tab":
				let direction = event.shiftKey ? -1 : 1;

				let is_data_x = data[i][j + direction];
				let is_data_y =
					data?.[i + direction]?.[direction > 0 ? 0 : _headers.length - 1];

				if (is_data_x || is_data_y) {
					event.preventDefault();
					selected = is_data_x
						? [i, j + direction]
						: [i + direction, direction > 0 ? 0 : _headers.length - 1];
				}
				editing = false;

				break;
			default:
				if (!editable) break;
				if (
					(!editing || (editing && dequal(editing, [i, j]))) &&
					event.key.length === 1
				) {
					clear_on_focus = true;
					editing = [i, j];
				}
		}
	}

	async function handle_cell_click(i: number, j: number): Promise<void> {
		if (dequal(editing, [i, j])) return;
		if (dequal(selected, [i, j])) return;
		header_edit = false;
		selected_header = false;
		editing = false;
		selected = [i, j];
		await tick();
		parent.focus();
	}

	type SortDirection = "asc" | "des";
	let sort_direction: SortDirection | undefined;
	let sort_by: number | undefined;

	function handle_sort(col: number): void {
		if (typeof sort_by !== "number" || sort_by !== col) {
			sort_direction = "asc";
			sort_by = col;
		} else {
			if (sort_direction === "asc") {
				sort_direction = "des";
			} else if (sort_direction === "des") {
				sort_direction = "asc";
			}
		}
	}

	let header_edit: number | false;

	let select_on_focus = false;
	let selected_header: number | false = false;
	async function edit_header(i: number, _select = false): Promise<void> {
		if (!editable || col_count[1] !== "dynamic" || header_edit === i) return;
		selected = false;
		selected_header = i;
		header_edit = i;
		select_on_focus = _select;
	}

	function end_header_edit(event: KeyboardEvent): void {
		if (!editable) return;

		switch (event.key) {
			case "Escape":
			case "Enter":
			case "Tab":
				event.preventDefault();
				selected = false;
				selected_header = header_edit;
				header_edit = false;
				parent.focus();
				break;
		}
	}

	async function add_row(index?: number): Promise<void> {
		if (row_count[1] !== "dynamic") return;
		if (data.length === 0) {
			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: "" };
				})
		);

		data = data;
		selected = [index ? index + 1 : data.length - 1, 0];
	}

	async function add_col(): Promise<void> {
		if (col_count[1] !== "dynamic") return;
		for (let i = 0; i < data.length; i++) {
			const _id = make_id();
			els[_id] = { cell: null, input: null };
			data[i].push({ id: _id, value: "" });
		}

		headers.push(`Header ${headers.length + 1}`);

		data = data;
		headers = headers;

		await tick();

		requestAnimationFrame(() => {
			edit_header(headers.length - 1, true);
			const new_w = parent.querySelectorAll("tbody")[1].offsetWidth;
			parent.querySelectorAll("table")[1].scrollTo({ left: new_w });
		});
	}

	function handle_click_outside(event: Event): void {
		editing = false;

		header_edit = false;
		parent.focus();
	}

	function guess_delimitaor(
		text: string,
		possibleDelimiters: string[]
	): string[] {
		return possibleDelimiters.filter(weedOut);

		function weedOut(delimiter: string): boolean {
			var cache = -1;
			return text.split("\n").every(checkLength);

			function checkLength(line: string): boolean {
				if (!line) {
					return true;
				}

				var length = line.split(delimiter).length;
				if (cache < 0) {
					cache = length;
				}
				return cache === length && length > 1;
			}
		}
	}

	function data_uri_to_blob(data_uri: string): Blob {
		const byte_str = atob(data_uri.split(",")[1]);
		const mime_str = data_uri.split(",")[0].split(":")[1].split(";")[0];

		const ab = new ArrayBuffer(byte_str.length);
		const ia = new Uint8Array(ab);

		for (let i = 0; i < byte_str.length; i++) {
			ia[i] = byte_str.charCodeAt(i);
		}

		return new Blob([ab], { type: mime_str });
	}

	function blob_to_string(blob: Blob): void {
		const reader = new FileReader();

		function handle_read(e: ProgressEvent<FileReader>): void {
			if (!e?.target?.result || typeof e.target.result !== "string") return;

			const [delimiter] = guess_delimitaor(e.target.result, [",", "\t"]);

			const [head, ...rest] = dsvFormat(delimiter).parseRows(e.target.result);

			_headers = make_headers(
				col_count[1] === "fixed" ? head.slice(0, col_count[0]) : head
			);

			values = rest;
			reader.removeEventListener("loadend", handle_read);
		}

		reader.addEventListener("loadend", handle_read);

		reader.readAsText(blob);
	}

	let dragging = false;

	let t_width = 0;

	function get_max(
		_d: { value: any; id: string }[][]
	): { value: any; id: string }[] {
		let max = _d[0].slice();
		for (let i = 0; i < _d.length; i++) {
			for (let j = 0; j < _d[i].length; j++) {
				if (`${max[j].value}`.length < `${_d[i][j].value}`.length) {
					max[j] = _d[i][j];
				}
			}
		}

		return max;
	}

	$: max = get_max(data);

	$: cells[0] && set_cell_widths();
	let cells: HTMLTableCellElement[] = [];
	let parent: HTMLDivElement;

	function set_cell_widths(): void {
		const widths = cells.map((el, i) => {
			return el?.clientWidth || 0;
		});

		if (widths.length === 0) return;
		for (let i = 0; i < widths.length; i++) {
			parent.style.setProperty(`--cell-width-${i}`, `${widths[i]}px`);
		}
	}

	let table_height: number = height || 500;

	function sort_data(
		_data: typeof data,
		col?: number,
		dir?: SortDirection
	): void {
		const id = selected ? data[selected[0]][selected[1]]?.id : null;
		if (typeof col !== "number" || !dir) {
			return;
		}
		if (dir === "asc") {
			_data.sort((a, b) => (a[col].value < b[col].value ? -1 : 1));
		} else if (dir === "des") {
			_data.sort((a, b) => (a[col].value > b[col].value ? -1 : 1));
		}

		data = data;

		if (id) {
			const [i, j] = get_current_indices(id);
			selected = [i, j];
		}
	}

	$: sort_data(data, sort_by, sort_direction);

	$: selected_index = !!selected && selected[0];

	let is_visible = false;
	onMount(() => {
		const observer = new IntersectionObserver((entries, observer) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting && !is_visible) {
					set_cell_widths();
					data = data;
				}

				is_visible = entry.isIntersecting;
			});
		});

		observer.observe(parent);

		return () => {
			observer.disconnect();
		};
	});
</script>

<svelte:window
	on:click={handle_click_outside}
	on:touchstart={handle_click_outside}
	on:resize={() => set_cell_widths()}
/>

<div class:label={label && label.length !== 0} use:copy>
	{#if label && label.length !== 0}
		<p>
			{label}
		</p>
	{/if}
	<div
		bind:this={parent}
		class="table-wrap"
		class:dragging
		class:no-wrap={!wrap}
		style="height:{table_height}px"
		on:keydown={(e) => handle_keydown(e)}
		role="grid"
		tabindex="0"
	>
		<table bind:clientWidth={t_width}>
			{#if label && label.length !== 0}
				<caption class="sr-only">{label}</caption>
			{/if}
			<thead>
				<tr>
					{#each _headers as { value, id }, i (id)}
						<th
							class:editing={header_edit === i}
							aria-sort={get_sort_status(value, sort_by, sort_direction)}
						>
							<div class="cell-wrap">
								<EditableCell
									{value}
									{latex_delimiters}
									header
									edit={false}
									el={null}
								/>

								<div
									class:sorted={sort_by === i}
									class:des={sort_by === i && sort_direction === "des"}
									class="sort-button {sort_direction} "
								>
									<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>
						</th>
					{/each}
				</tr>
			</thead>
			<tbody>
				<tr>
					{#each max as { value, id }, j (id)}
						<td tabindex="-1" bind:this={cells[j]}>
							<div class="cell-wrap">
								<EditableCell
									{value}
									{latex_delimiters}
									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
									edit={false}
									el={null}
								/>
							</div>
						</td>
					{/each}
				</tr>
			</tbody>
		</table>
		<Upload
			flex={false}
			center={false}
			boundedheight={false}
			disable_click={true}
			on:load={(e) => blob_to_string(data_uri_to_blob(e.detail.data))}
			bind:dragging
		>
			<VirtualTable
				bind:items={data}
				table_width={t_width}
				max_height={height || 500}
				bind:actual_height={table_height}
				selected={selected_index}
			>
				{#if label && label.length !== 0}
					<caption class="sr-only">{label}</caption>
				{/if}
				<tr slot="thead">
					{#each _headers as { value, id }, i (id)}
						<th
							class:focus={header_edit === i || selected_header === i}
							aria-sort={get_sort_status(value, sort_by, sort_direction)}
							style="width: var(--cell-width-{i});"
						>
							<div class="cell-wrap">
								<EditableCell
									bind:value={_headers[i].value}
									bind:el={els[id].input}
									{latex_delimiters}
									edit={header_edit === i}
									on:keydown={end_header_edit}
									on:dblclick={() => edit_header(i)}
									{select_on_focus}
									header
								/>

								<!-- 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"
									>
										<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
									</svg>
								</div>
							</div>
						</th>
					{/each}
				</tr>

				<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
					{#each item as { value, id }, j (id)}
						<td
							tabindex="0"
							on:touchstart={() => start_edit(index, j)}
							on:click={() => handle_cell_click(index, j)}
							on:dblclick={() => start_edit(index, j)}
							style="width: var(--cell-width-{j});"
							class:focus={dequal(selected, [index, j])}
						>
							<div class="cell-wrap">
								<EditableCell
									bind:value={data[index][j].value}
									bind:el={els[id].input}
									{latex_delimiters}
									edit={dequal(editing, [index, j])}
									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
									on:focus={() => parent.focus()}
									on:blur={() => ((clear_on_focus = false), parent.focus())}
									{clear_on_focus}
								/>
							</div>
						</td>
					{/each}
				</tr>
			</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={() => 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>
						{$_("dataframe.new_row")}
					</BaseButton>
				</span>
			{/if}
			{#if col_count[1] === "dynamic"}
				<span class="button-wrap">
					<BaseButton variant="secondary" size="sm" on:click={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>
						{$_("dataframe.new_column")}
					</BaseButton>
				</span>
			{/if}
		</div>
	{/if}
</div>

<style>
	.button-wrap:hover svg {
		color: var(--color-accent);
	}

	.button-wrap svg {
		margin-right: var(--size-1);
		margin-left: -5px;
	}

	.label p {
		position: relative;
		z-index: var(--layer-4);
		margin-bottom: var(--size-2);
		color: var(--block-label-text-color);
		font-size: var(--block-label-text-size);
	}

	.table-wrap {
		position: relative;
		transition: 150ms;
		border: 1px solid var(--border-color-primary);
		border-radius: var(--table-radius);
		overflow: hidden;
	}

	.table-wrap:focus-within {
		outline: none;
		background-color: none;
	}

	.dragging {
		border-color: var(--color-accent);
	}

	.no-wrap {
		white-space: nowrap;
	}

	table {
		position: absolute;
		opacity: 0;
		transition: 150ms;
		width: var(--size-full);
		table-layout: auto;
		color: var(--body-text-color);
		font-size: var(--input-text-size);
		line-height: var(--line-md);
		font-family: var(--font-mono);
		border-spacing: 0;
	}

	thead {
		position: sticky;
		top: 0;
		left: 0;
		z-index: var(--layer-1);
		box-shadow: var(--shadow-drop);
	}

	tr {
		border-bottom: 1px solid var(--border-color-primary);
		text-align: left;
	}

	tr > * + * {
		border-right-width: 0px;
		border-left-width: 1px;
		border-style: solid;
		border-color: var(--border-color-primary);
	}

	th,
	td {
		--ring-color: transparent;
		position: relative;
		outline: none;
		box-shadow: inset 0 0 0 1px var(--ring-color);
		padding: 0;
	}

	th:first-child {
		border-top-left-radius: var(--table-radius);
	}

	th:last-child {
		border-top-right-radius: var(--table-radius);
	}

	th.focus,
	td.focus {
		--ring-color: var(--color-accent);
	}

	tr:last-child td:first-child {
		border-bottom-left-radius: var(--table-radius);
	}

	tr:last-child td:last-child {
		border-bottom-right-radius: var(--table-radius);
	}

	tr th {
		background: var(--table-even-background-fill);
	}

	th svg {
		fill: currentColor;
		font-size: 10px;
	}

	.sort-button {
		display: flex;
		flex: none;
		justify-content: center;
		align-items: center;
		transition: 150ms;
		cursor: pointer;
		padding: var(--size-2);
		color: var(--body-text-color-subdued);
		line-height: var(--text-sm);
	}

	.sort-button:hover {
		color: var(--body-text-color);
	}

	.des {
		transform: scaleY(-1);
	}

	.sort-button.sorted {
		color: var(--color-accent);
	}

	.editing {
		background: var(--table-editing);
	}

	.cell-wrap {
		display: flex;
		align-items: center;
		outline: none;
		height: var(--size-full);
		min-height: var(--size-9);
	}

	.controls-wrap {
		display: flex;
		justify-content: flex-end;
		padding-top: var(--size-2);
	}

	.controls-wrap > * + * {
		margin-left: var(--size-1);
	}

	.row_odd {
		background: var(--table-odd-background-fill);
	}

	.row_odd.focus {
		background: var(--background-fill-primary);
	}
</style>