@gradio/dataframe 0.16.5 → 0.17.1

package/shared/icons/SelectionButtons.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	export let position: "column" | "row";
+	export let coords: [number, number];
+	export let on_click: (() => void) | null = null;
+
+	$: is_first_position =
+		position === "column" ? coords[0] === 0 : coords[1] === 0;
+	$: direction =
+		position === "column"
+			? is_first_position
+				? "down"
+				: "up"
+			: is_first_position
+				? "right"
+				: "left";
+</script>
+
+<button
+	class="selection-button selection-button-{position} {is_first_position
+		? `move-${direction}`
+		: ''}"
+	on:click|stopPropagation={() => on_click && on_click()}
+	aria-label={`Select ${position}`}
+>
+	<span class={direction}>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path
+				d="m16.707 13.293-4-4a1 1 0 0 0-1.414 0l-4 4A1 1 0 0 0 8 15h8a1 1 0 0 0 .707-1.707z"
+				data-name={direction}
+			/>
+		</svg>
+	</span>
+</button>
+
+<style>
+	.selection-button {
+		position: absolute;
+		background: var(--color-accent);
+		width: var(--size-3);
+		height: var(--size-5);
+		color: var(--background-fill-primary);
+	}
+
+	.selection-button-column {
+		top: -15px;
+		left: 50%;
+		transform: translateX(-50%) rotate(90deg);
+		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+	}
+
+	.selection-button-row {
+		left: calc(var(--size-2-5) * -1);
+		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+	}
+
+	.move-down {
+		bottom: -14px;
+		top: auto;
+		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+	}
+
+	.move-right {
+		left: auto;
+		right: calc(var(--size-2-5) * -1);
+		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+	}
+
+	svg {
+		fill: currentColor;
+	}
+
+	span {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.up {
+		transform: rotate(-90deg);
+	}
+
+	.down {
+		transform: rotate(90deg);
+	}
+
+	.left {
+		transform: rotate(-90deg);
+	}
+
+	.right {
+		transform: rotate(90deg);
+	}
+</style>

package/shared/icons/SortArrowDown.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let size = 16;
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M4 8L8 12L12 8"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8 12V4"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
+</svg>

package/shared/icons/SortArrowUp.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let size = 16;
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M4 8L8 4L12 8"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8 4V12"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
+</svg>

package/shared/icons/SortButtonDown.svelte

@@ -0,0 +1,14 @@
+<svg
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	focusable="false"
+>
+	<path
+		d="M7 10l5 5 5-5"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/shared/icons/SortButtonUp.svelte

@@ -0,0 +1,15 @@
+<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>

package/shared/icons/SortIcon.svelte

@@ -1,61 +1,43 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
-
-	type SortDirection = "asc" | "des";
+	import SortButtonUp from "./SortButtonUp.svelte";
+	import SortButtonDown from "./SortButtonDown.svelte";
+	import { IconButton } from "@gradio/atoms";
+	type SortDirection = "asc" | "desc";
 	export let direction: SortDirection | null = null;
+	export let priority: number | 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"
+	{#if (direction === "asc" || direction === "desc") && priority !== null}
+		<span aria-label={`Sort priority: ${priority}`} class="priority"
+			>{priority}</span
 		>
-			<path
-				d="M7 10l5 5 5-5"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-		</svg>
-	</button>
+	{/if}
+	<IconButton
+		size="x-small"
+		label={i18n("dataframe.sort_ascending")}
+		Icon={SortButtonUp}
+		highlight={direction === "asc"}
+		on:click={(event) => {
+			event.stopPropagation();
+			dispatch("sort", "asc");
+		}}
+	></IconButton>
+	<IconButton
+		size="x-small"
+		label={i18n("dataframe.sort_descending")}
+		Icon={SortButtonDown}
+		highlight={direction === "desc"}
+		on:click={(event) => {
+			event.stopPropagation();
+			dispatch("sort", "desc");
+		}}
+	></IconButton>
 </div>
 
 <style>
@@ -63,33 +45,28 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0;
-		margin-right: var(--spacing-md);
+		margin-right: var(--spacing-sm);
 	}
 
-	.sort-button {
+	.sort-icons :global(button) {
+		margin-bottom: var(--spacing-xs);
+		border: 1px solid var(--border-color-primary);
+		background: unset;
+	}
+
+	.priority {
 		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;
+		position: absolute;
+		font-size: var(--size-2);
+		left: 19px;
+		z-index: var(--layer-3);
+		top: var(--spacing-xs);
+		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);
 	}
 </style>

package/shared/selection_utils.ts

@@ -2,6 +2,14 @@ import type { CellCoordinate, EditingState } from "./types";
 
 export type CellData = { id: string; value: string | number };
 
+export function is_cell_in_selection(
+	coords: [number, number],
+	selected_cells: [number, number][]
+): boolean {
+	const [row, col] = coords;
+	return selected_cells.some(([r, c]) => r === row && c === col);
+}
+
 export function is_cell_selected(
 	cell: CellCoordinate,
 	selected_cells: CellCoordinate[]
@@ -29,8 +37,14 @@ export function get_range_selection(
 	const max_col = Math.max(start_col, end_col);
 
 	const cells: CellCoordinate[] = [];
+	// Add the start cell as the "anchor" cell so that when
+	// we press shift+arrow keys, the selection will always
+	// include the anchor cell.
+	cells.push(start);
+
 	for (let i = min_row; i <= max_row; i++) {
 		for (let j = min_col; j <= max_col; j++) {
+			if (i === start_row && j === start_col) continue;
 			cells.push([i, j]);
 		}
 	}
@@ -137,10 +151,11 @@ export function get_next_cell_coordinates(
 }
 
 export function move_cursor(
-	key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
+	event: KeyboardEvent,
 	current_coords: CellCoordinate,
 	data: CellData[][]
 ): CellCoordinate | false {
+	const key = event.key as "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp";
 	const dir = {
 		ArrowRight: [0, 1],
 		ArrowLeft: [0, -1],
@@ -148,8 +163,27 @@ export function move_cursor(
 		ArrowUp: [-1, 0]
 	}[key];
 
-	const i = current_coords[0] + dir[0];
-	const j = current_coords[1] + dir[1];
+	let i, j;
+	if (event.metaKey || event.ctrlKey) {
+		if (key === "ArrowRight") {
+			i = current_coords[0];
+			j = data[0].length - 1;
+		} else if (key === "ArrowLeft") {
+			i = current_coords[0];
+			j = 0;
+		} else if (key === "ArrowDown") {
+			i = data.length - 1;
+			j = current_coords[1];
+		} else if (key === "ArrowUp") {
+			i = 0;
+			j = current_coords[1];
+		} else {
+			return false;
+		}
+	} else {
+		i = current_coords[0] + dir[0];
+		j = current_coords[1] + dir[1];
+	}
 
 	if (i < 0 && j <= 0) {
 		return false;
@@ -206,25 +240,17 @@ export function calculate_selection_positions(
 		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`;
+	const row_pos = `${cell_rect.top - table_rect.top + cell_rect.height / 2}px`;
+
 	return { col_pos, row_pos };
 }

package/shared/utils/data_processing.ts

@@ -0,0 +1,72 @@
+import type { Headers, HeadersWithIDs } from "../utils";
+
+export function make_headers(
+	_head: Headers,
+	col_count: [number, "fixed" | "dynamic"],
+	els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+	>,
+	make_id: () => string
+): HeadersWithIDs {
+	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 ?? "" };
+	});
+}
+
+export function process_data(
+	values: (string | number)[][],
+	els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+	>,
+	data_binding: Record<string, any>,
+	make_id: () => string,
+	display_value: string[][] | null = null
+): { id: string; value: string | number; display_value?: string }[][] {
+	if (!values || values.length === 0) {
+		return [];
+	}
+
+	const result = values.map((row, i) => {
+		return row.map((value, j) => {
+			const _id = make_id();
+			els[_id] = { cell: null, input: null };
+			data_binding[_id] = value;
+
+			let display = display_value?.[i]?.[j];
+
+			if (display === undefined) {
+				display = String(value);
+			}
+
+			return {
+				id: _id,
+				value,
+				display_value: display
+			};
+		});
+	});
+
+	return result;
+}

package/shared/utils/drag_utils.ts

@@ -0,0 +1,92 @@
+import type { CellCoordinate } from "../types";
+import { get_range_selection } from "../selection_utils";
+
+export type DragState = {
+	is_dragging: boolean;
+	drag_start: CellCoordinate | null;
+	mouse_down_pos: { x: number; y: number } | null;
+};
+
+export type DragHandlers = {
+	handle_mouse_down: (event: MouseEvent, row: number, col: number) => void;
+	handle_mouse_move: (event: MouseEvent) => void;
+	handle_mouse_up: (event: MouseEvent) => void;
+};
+
+export function create_drag_handlers(
+	state: DragState,
+	set_is_dragging: (value: boolean) => void,
+	set_selected_cells: (cells: CellCoordinate[]) => void,
+	set_selected: (cell: CellCoordinate | false) => void,
+	handle_cell_click: (event: MouseEvent, row: number, col: number) => void,
+	show_row_numbers: boolean,
+	parent_element?: HTMLElement
+): DragHandlers {
+	const start_drag = (event: MouseEvent, row: number, col: number): void => {
+		if (
+			event.target instanceof HTMLAnchorElement ||
+			(show_row_numbers && col === -1)
+		)
+			return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		state.mouse_down_pos = { x: event.clientX, y: event.clientY };
+		state.drag_start = [row, col];
+
+		if (!event.shiftKey && !event.metaKey && !event.ctrlKey) {
+			set_selected_cells([[row, col]]);
+			set_selected([row, col]);
+		}
+	};
+
+	const update_selection = (event: MouseEvent): void => {
+		const cell = (event.target as HTMLElement).closest("td");
+		if (!cell) return;
+
+		const row = parseInt(cell.getAttribute("data-row") || "0");
+		const col = parseInt(cell.getAttribute("data-col") || "0");
+
+		if (isNaN(row) || isNaN(col)) return;
+
+		const selection_range = get_range_selection(state.drag_start!, [row, col]);
+		set_selected_cells(selection_range);
+		set_selected([row, col]);
+	};
+
+	const end_drag = (event: MouseEvent): void => {
+		if (!state.is_dragging && state.drag_start) {
+			handle_cell_click(event, state.drag_start[0], state.drag_start[1]);
+		} else if (state.is_dragging && parent_element) {
+			parent_element.focus();
+		}
+
+		state.is_dragging = false;
+		set_is_dragging(false);
+		state.drag_start = null;
+		state.mouse_down_pos = null;
+	};
+
+	return {
+		handle_mouse_down: start_drag,
+
+		handle_mouse_move(event: MouseEvent): void {
+			if (!state.drag_start || !state.mouse_down_pos) return;
+
+			const dx = Math.abs(event.clientX - state.mouse_down_pos.x);
+			const dy = Math.abs(event.clientY - state.mouse_down_pos.y);
+
+			if (!state.is_dragging && (dx > 3 || dy > 3)) {
+				state.is_dragging = true;
+				set_is_dragging(true);
+			}
+
+			if (state.is_dragging) {
+				update_selection(event);
+			}
+		},
+
+		handle_mouse_up: end_drag
+	};
+}