@gradio/dataframe 0.16.5 → 0.17.1

package/shared/VirtualTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, tick } from "svelte";
+	import { onMount, tick, createEventDispatcher } from "svelte";
 	import { _ } from "svelte-i18n";
 
 	export let items: any[][] = [];
@@ -11,6 +11,13 @@
 	export let end = 20;
 	export let selected: number | false;
 	export let disable_scroll = false;
+	export let show_scroll_button = false;
+	export let viewport: HTMLTableElement;
+
+	const dispatch = createEventDispatcher<{
+		scroll_top: number;
+	}>();
+
 	let height = "100%";
 
 	let average_height = 30;
@@ -22,7 +29,6 @@
 	let mounted: boolean;
 	let rows: HTMLCollectionOf<HTMLTableRowElement>;
 	let top = 0;
-	let viewport: HTMLTableElement;
 	let viewport_height = 200;
 	let visible: { index: number; data: any[] }[] = [];
 	let viewport_box: DOMRectReadOnly;
@@ -151,6 +157,12 @@
 	async function handle_scroll(e: Event): Promise<void> {
 		const scroll_top = viewport.scrollTop;
 
+		show_scroll_button = scroll_top > 100;
+
+		if (show_scroll_button) {
+			dispatch("scroll_top", scroll_top);
+		}
+
 		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
 		const is_start_overflow = sortedItems.length < start;
 
@@ -293,8 +305,7 @@
 <style type="text/css">
 	table {
 		position: relative;
-		overflow-y: scroll;
-		overflow-x: scroll;
+		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		max-height: var(--max-height);
 		box-sizing: border-box;
@@ -309,7 +320,52 @@
 		width: 100%;
 		scroll-snap-type: x proximity;
 		border-collapse: separate;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+	}
+
+	table::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
+	}
+
+	table::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	table::-webkit-scrollbar-thumb {
+		background-color: rgba(128, 128, 128, 0.5);
+		border-radius: 4px;
+	}
+
+	table:hover {
+		scrollbar-color: rgba(160, 160, 160, 0.7) transparent;
 	}
+
+	table:hover::-webkit-scrollbar-thumb {
+		background-color: rgba(160, 160, 160, 0.7);
+		border-radius: 4px;
+		width: 4px;
+	}
+
+	@media (hover: none) {
+		table {
+			scrollbar-color: rgba(160, 160, 160, 0.7) transparent;
+		}
+
+		table::-webkit-scrollbar-thumb {
+			background-color: rgba(160, 160, 160, 0.7);
+			border-radius: 4px;
+		}
+	}
+
+	@media (pointer: coarse) {
+		table::-webkit-scrollbar {
+			width: 8px;
+			height: 8px;
+		}
+	}
+
 	table :is(thead, tfoot, tbody) {
 		display: table;
 		table-layout: fixed;
@@ -344,46 +400,43 @@
 		background: var(--table-even-background-fill);
 	}
 
-	tbody :global(td.frozen-column) {
+	tbody :global(td.pinned-column) {
 		position: sticky;
-		z-index: var(--layer-2);
+		z-index: 3;
 	}
 
-	tbody :global(tr:nth-child(odd)) :global(td.frozen-column) {
+	tbody :global(tr:nth-child(odd)) :global(td.pinned-column) {
 		background: var(--table-odd-background-fill);
 	}
 
-	tbody :global(tr:nth-child(even)) :global(td.frozen-column) {
+	tbody :global(tr:nth-child(even)) :global(td.pinned-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);
+	tbody :global(td.last-pinned) {
+		border-right: 1px solid var(--border-color-primary);
 	}
 
 	thead {
 		position: sticky;
 		top: 0;
 		left: 0;
-		z-index: var(--layer-3);
 		background: var(--background-fill-primary);
+		z-index: 7;
 	}
 
 	thead :global(th) {
 		background: var(--table-even-background-fill) !important;
 	}
 
-	thead :global(th.frozen-column) {
+	thead :global(th.pinned-column) {
 		position: sticky;
-		z-index: var(--layer-4);
+		z-index: 7;
+		background: var(--table-even-background-fill) !important;
 	}
 
-	thead :global(th.always-frozen) {
-		z-index: var(--layer-5);
+	thead :global(th.last-pinned) {
+		border-right: 1px solid var(--border-color-primary);
 	}
 
 	.table.disable-scroll {

package/shared/context/keyboard_context.ts

@@ -0,0 +1,65 @@
+import { getContext, setContext } from "svelte";
+import type { DataFrameContext } from "./table_context";
+import type { CellData } from "../selection_utils";
+import type { DataframeValue } from "../utils";
+import type { CellCoordinate } from "../types";
+
+const KEYBOARD_KEY = Symbol("keyboard");
+
+export type KeyboardContext = {
+	selected_header: number | false;
+	header_edit: number | false;
+	editing: [number, number] | false;
+	selected: [number, number] | false;
+	selected_cells: [number, number][];
+	editable: boolean;
+	data: CellData[][];
+	headers: { id: string; value: string }[];
+	els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+	>;
+	df_actions: DataFrameContext["actions"];
+	dispatch: {
+		(e: "change", detail: DataframeValue): void;
+		(e: "input", detail?: undefined): void;
+		(e: "select", detail: any): void;
+		(e: "search", detail: string | null): void;
+	};
+	add_row: (index?: number) => Promise<void>;
+	get_next_cell_coordinates: (
+		current: CellCoordinate,
+		data: CellData[][],
+		shift_key: boolean
+	) => false | CellCoordinate;
+	get_range_selection: (
+		start: CellCoordinate,
+		end: CellCoordinate
+	) => CellCoordinate[];
+	move_cursor: (
+		event: KeyboardEvent,
+		current_coords: CellCoordinate,
+		data: CellData[][]
+	) => false | CellCoordinate;
+	copy_flash: boolean;
+	set_copy_flash: (value: boolean) => void;
+	parent_element?: HTMLDivElement;
+};
+
+export function create_keyboard_context(
+	context: KeyboardContext
+): KeyboardContext {
+	const instance_id = Symbol(
+		`keyboard_${Math.random().toString(36).substring(2)}`
+	);
+	setContext(instance_id, context);
+	setContext(KEYBOARD_KEY, { instance_id, context });
+	return context;
+}
+
+export function get_keyboard_context(): KeyboardContext | undefined {
+	const ctx = getContext<{ instance_id: symbol; context: KeyboardContext }>(
+		KEYBOARD_KEY
+	);
+	return ctx ? ctx.context : getContext<KeyboardContext>(KEYBOARD_KEY);
+}

package/shared/context/selection_context.ts

@@ -0,0 +1,168 @@
+import { getContext, setContext } from "svelte";
+import { tick } from "svelte";
+import type { DataFrameContext } from "./table_context";
+import type { CellData } from "../selection_utils";
+import type { DataframeValue } from "../utils";
+import { handle_selection } from "../selection_utils";
+
+const SELECTION_KEY = Symbol("selection");
+
+export type SelectionContext = {
+	df_actions: DataFrameContext["actions"];
+	dispatch: {
+		(e: "change", detail: DataframeValue): void;
+		(e: "input", detail?: undefined): void;
+		(e: "select", detail: any): void;
+		(e: "search", detail: string | null): void;
+	};
+	data: CellData[][];
+	els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+	>;
+	editable: boolean;
+	show_row_numbers: boolean;
+	get_data_at: (row: number, col: number) => string | number;
+	clear_on_focus: boolean;
+	selected_cells: [number, number][];
+	parent_element: HTMLElement;
+	actions: {
+		handle_cell_click: (event: MouseEvent, row: number, col: number) => void;
+		toggle_cell_menu: (event: MouseEvent, row: number, col: number) => void;
+		toggle_cell_button: (row: number, col: number) => void;
+		handle_select_column: (col: number) => void;
+		handle_select_row: (row: number) => void;
+	};
+};
+
+export function create_selection_context(
+	context: Omit<SelectionContext, "actions">
+): SelectionContext {
+	const instance_id = Symbol(
+		`selection_${Math.random().toString(36).substring(2)}`
+	);
+	const actions = {
+		handle_cell_click: (event: MouseEvent, row: number, col: number) => {
+			if (event.target instanceof HTMLAnchorElement) return;
+
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (context.show_row_numbers && col === -1) return;
+
+			context.clear_on_focus = false;
+			context.df_actions.set_active_cell_menu(null);
+			context.df_actions.set_active_header_menu(null);
+			context.df_actions.set_selected_header(false);
+			context.df_actions.set_header_edit(false);
+
+			const new_selected_cells = handle_selection(
+				[row, col],
+				context.selected_cells || [],
+				event
+			);
+
+			context.df_actions.set_selected_cells(new_selected_cells);
+			context.df_actions.set_selected(new_selected_cells[0]);
+
+			if (context.editable) {
+				if (new_selected_cells.length === 1) {
+					context.df_actions.set_editing([row, col]);
+					tick().then(() => {
+						const input_el = context.els[context.data[row][col].id].input;
+						if (input_el) {
+							input_el.focus();
+							input_el.selectionStart = input_el.selectionEnd =
+								input_el.value.length;
+						}
+					});
+				} else {
+					context.df_actions.set_editing(false);
+					context.parent_element.focus();
+				}
+			} else {
+				context.parent_element.focus();
+			}
+
+			actions.toggle_cell_button(row, col);
+
+			context.dispatch("select", {
+				index: [row, col],
+				value: context.get_data_at(row, col),
+				row_value: context.data[row].map((d) => d.value)
+			});
+		},
+
+		toggle_cell_menu: (event: MouseEvent, row: number, col: number) => {
+			event.stopPropagation();
+			const current_menu = context.df_actions.get_active_cell_menu();
+			if (
+				current_menu &&
+				current_menu.row === row &&
+				current_menu.col === col
+			) {
+				context.df_actions.set_active_cell_menu(null);
+			} else {
+				const cell = (event.target as HTMLElement).closest("td");
+				if (cell) {
+					const rect = cell.getBoundingClientRect();
+					context.df_actions.set_active_cell_menu({
+						row,
+						col,
+						x: rect.right,
+						y: rect.bottom
+					});
+				}
+			}
+		},
+
+		toggle_cell_button: (row: number, col: number) => {
+			const current_button = context.df_actions.get_active_button();
+			const new_button =
+				current_button?.type === "cell" &&
+				current_button.row === row &&
+				current_button.col === col
+					? null
+					: { type: "cell" as const, row, col };
+			context.df_actions.set_active_button(new_button);
+		},
+
+		handle_select_column: (col: number) => {
+			const selected_cells = context.data.map(
+				(_, row) => [row, col] as [number, number]
+			);
+			context.df_actions.set_selected_cells(selected_cells);
+			context.df_actions.set_selected(selected_cells[0]);
+			context.df_actions.set_editing(false);
+
+			setTimeout(() => {
+				context.parent_element.focus();
+			}, 0);
+		},
+
+		handle_select_row: (row: number) => {
+			const selected_cells = context.data[0].map(
+				(_, col) => [row, col] as [number, number]
+			);
+			context.df_actions.set_selected_cells(selected_cells);
+			context.df_actions.set_selected(selected_cells[0]);
+			context.df_actions.set_editing(false);
+
+			setTimeout(() => {
+				context.parent_element.focus();
+			}, 0);
+		}
+	};
+
+	const selection_context = { ...context, actions };
+	setContext(instance_id, selection_context);
+	setContext(SELECTION_KEY, { instance_id, context: selection_context });
+	return selection_context;
+}
+
+export function get_selection_context(): SelectionContext {
+	const ctx = getContext<{ instance_id: symbol; context: SelectionContext }>(
+		SELECTION_KEY
+	);
+	return ctx ? ctx.context : getContext<SelectionContext>(SELECTION_KEY);
+}