@gradio/dataframe 0.22.0 → 0.23.0

package/dist/shared/VirtualTable.svelte

@@ -1,379 +0,0 @@
-<script lang="ts">
-	import { onMount, tick, createEventDispatcher } from "svelte";
-
-	export let items: any[][] = [];
-
-	export let max_height: number;
-	export let actual_height: number;
-	export let table_scrollbar_width: number;
-	export let start = 0;
-	export let end = 20;
-	export let selected: number | false;
-	export let disable_scroll = false;
-	export let show_scroll_button = false;
-	export let viewport: HTMLTableElement;
-	export let label: string | null = null;
-
-	const dispatch = createEventDispatcher<{
-		scroll_top: number;
-	}>();
-
-	let height = "100%";
-
-	let average_height = 30;
-	let bottom = 0;
-	let contents: HTMLTableSectionElement;
-	let head_height = 0;
-	let foot_height = 0;
-	let height_map: number[] = [];
-	let mounted: boolean;
-	let rows: HTMLCollectionOf<HTMLTableRowElement>;
-	let top = 0;
-	let viewport_height = 200;
-	let visible: { index: number; data: any[] }[] = [];
-	let viewport_box: DOMRectReadOnly;
-
-	$: viewport_height = viewport_box?.height || 200;
-
-	const is_browser = typeof window !== "undefined";
-	const raf = is_browser
-		? window.requestAnimationFrame
-		: (cb: (...args: any[]) => void) => cb();
-
-	$: {
-		if (mounted && viewport_height && viewport.offsetParent) {
-			(sortedItems, raf(refresh_height_map));
-		}
-	}
-
-	async function refresh_height_map(): Promise<void> {
-		if (!viewport) {
-			return;
-		}
-
-		if (sortedItems.length < start) {
-			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
-		}
-
-		const scrollTop = Math.max(0, viewport.scrollTop);
-		show_scroll_button = scrollTop > 100;
-		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
-
-		// acquire height map for currently visible rows
-		for (let v = 0; v < rows.length; v += 1) {
-			height_map[start + v] = rows[v].getBoundingClientRect().height;
-		}
-		let i = 0;
-		let y = head_height;
-		// loop items to find new start
-		while (i < sortedItems.length) {
-			const row_height = height_map[i] || average_height;
-			// keep a page of rows buffered above
-			if (y + row_height > scrollTop - max_height) {
-				start = i;
-				top = y - head_height;
-				break;
-			}
-			y += row_height;
-			i += 1;
-		}
-
-		let content_height = head_height;
-		while (i < sortedItems.length) {
-			const row_height = height_map[i] || average_height;
-			content_height += row_height;
-			i += 1;
-			// keep a page of rows buffered below
-			if (content_height - head_height > 3 * max_height) {
-				break;
-			}
-		}
-
-		end = i;
-		const remaining = sortedItems.length - end;
-
-		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
-		if (scrollbar_height > 0) {
-			content_height += scrollbar_height;
-		}
-
-		let filtered_height_map = height_map.filter((v) => typeof v === "number");
-		average_height =
-			filtered_height_map.reduce((a, b) => a + b, 0) /
-				filtered_height_map.length || 30;
-
-		bottom = remaining * average_height;
-		if (!isFinite(bottom)) {
-			bottom = 200000;
-		}
-		height_map.length = sortedItems.length;
-		while (i < sortedItems.length) {
-			i += 1;
-			height_map[i] = average_height;
-		}
-		if (max_height && content_height > max_height) {
-			actual_height = max_height;
-		} else {
-			actual_height = content_height;
-		}
-	}
-
-	$: scroll_and_render(selected);
-
-	async function scroll_and_render(n: number | false): Promise<void> {
-		raf(async () => {
-			if (typeof n !== "number") return;
-			const direction = typeof n !== "number" ? false : is_in_view(n);
-			if (direction === true) {
-				return;
-			}
-			if (direction === "back") {
-				await scroll_to_index(n, { behavior: "instant" });
-			}
-
-			if (direction === "forwards") {
-				await scroll_to_index(n, { behavior: "instant" }, true);
-			}
-		});
-	}
-
-	function is_in_view(n: number): "back" | "forwards" | true {
-		const current = rows && rows[n - start];
-		if (!current && n < start) {
-			return "back";
-		}
-		if (!current && n >= end - 1) {
-			return "forwards";
-		}
-
-		const { top: viewport_top } = viewport.getBoundingClientRect();
-		const { top, bottom } = current.getBoundingClientRect();
-
-		if (top - viewport_top < 37) {
-			return "back";
-		}
-
-		if (bottom - viewport_top > viewport_height) {
-			return "forwards";
-		}
-
-		return true;
-	}
-
-	export async function scroll_to_index(
-		index: number,
-		opts: ScrollToOptions,
-		align_end = false
-	): Promise<void> {
-		await tick();
-
-		const _itemHeight = average_height;
-
-		let distance = index * _itemHeight;
-		if (align_end) {
-			distance = distance - viewport_height + _itemHeight + head_height;
-		}
-
-		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
-		if (scrollbar_height > 0) {
-			distance += scrollbar_height;
-		}
-
-		const _opts = {
-			top: distance,
-			behavior: "smooth" as ScrollBehavior,
-			...opts
-		};
-
-		viewport.scrollTo(_opts);
-	}
-
-	$: sortedItems = items;
-
-	$: visible = is_browser
-		? sortedItems.slice(start, end).map((data, i) => {
-				return { index: i + start, data };
-			})
-		: sortedItems
-				.slice(0, (max_height / sortedItems.length) * average_height + 1)
-				.map((data, i) => {
-					return { index: i + start, data };
-				});
-
-	onMount(() => {
-		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
-		mounted = true;
-	});
-</script>
-
-<svelte-virtual-table-viewport>
-	<div>
-		<table
-			class="table"
-			class:disable-scroll={disable_scroll}
-			bind:this={viewport}
-			bind:contentRect={viewport_box}
-			on:scroll={refresh_height_map}
-			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"
-		>
-			{#if label && label.length !== 0}
-				<caption class="sr-only">{label}</caption>
-			{/if}
-			<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}>
-							<tr>
-								<td>Missing Table Row</td>
-							</tr>
-						</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">
-	table {
-		position: relative;
-		overflow: auto;
-		-webkit-overflow-scrolling: touch;
-		max-height: var(--max-height);
-		box-sizing: border-box;
-		display: block;
-		padding: 0;
-		margin: 0;
-		color: var(--body-text-color);
-		font-size: var(--input-text-size);
-		line-height: var(--line-md);
-		font-family: var(--font-mono);
-		border-spacing: 0;
-		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;
-		width: 100%;
-		box-sizing: border-box;
-	}
-
-	tbody {
-		overflow-x: scroll;
-		overflow-y: hidden;
-	}
-
-	table tbody {
-		padding-top: var(--bw-svt-p-top);
-		padding-bottom: var(--bw-svt-p-bottom);
-	}
-	tbody {
-		position: relative;
-		box-sizing: border-box;
-		border: 0px solid currentColor;
-	}
-
-	tbody > :global(tr:last-child) {
-		border: none;
-	}
-
-	table :global(td) {
-		scroll-snap-align: start;
-	}
-
-	tbody :global(td.pinned-column) {
-		position: sticky;
-		z-index: 3;
-	}
-
-	tbody :global(tr:nth-child(odd)) :global(td.pinned-column) {
-		background: var(--table-odd-background-fill);
-	}
-
-	tbody :global(tr:nth-child(even)) :global(td.pinned-column) {
-		background: var(--table-even-background-fill);
-	}
-
-	tbody :global(td.last-pinned) {
-		border-right: 1px solid var(--border-color-primary);
-	}
-
-	thead {
-		position: sticky;
-		top: 0;
-		left: 0;
-		background: var(--background-fill-primary);
-		z-index: 7;
-	}
-
-	thead :global(th) {
-		background: var(--table-even-background-fill) !important;
-	}
-
-	thead :global(th.pinned-column) {
-		position: sticky;
-		z-index: 7;
-		background: var(--table-even-background-fill) !important;
-	}
-
-	thead :global(th.last-pinned) {
-		border-right: 1px solid var(--border-color-primary);
-	}
-
-	.table.disable-scroll {
-		overflow: hidden !important;
-	}
-</style>

package/dist/shared/VirtualTable.svelte.d.ts

@@ -1,42 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const VirtualTable: $$__sveltets_2_IsomorphicComponent<{
-    items?: any[][];
-    max_height: number;
-    actual_height: number;
-    table_scrollbar_width: number;
-    start?: number;
-    end?: number;
-    selected: number | false;
-    disable_scroll?: boolean;
-    show_scroll_button?: boolean;
-    viewport: HTMLTableElement;
-    label?: string | null;
-    scroll_to_index?: (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
-}, {
-    scroll_top: CustomEvent<number>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    thead: {};
-    tbody: {
-        item: any[];
-        index: number;
-    };
-    tfoot: {};
-}, {
-    scroll_to_index: (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
-}, string>;
-type VirtualTable = InstanceType<typeof VirtualTable>;
-export default VirtualTable;

package/dist/shared/context/dataframe_context.d.ts

@@ -1,180 +0,0 @@
-import { writable } from "svelte/store";
-import type { CellValue } from "../types";
-import { get_next_cell_coordinates, get_range_selection, move_cursor } from "../utils/selection_utils";
-export declare const DATAFRAME_KEY: unique symbol;
-export type SortDirection = "asc" | "desc";
-export type FilterDatatype = "string" | "number";
-export type CellCoordinate = [number, number];
-interface DataFrameState {
-    config: {
-        show_fullscreen_button: boolean;
-        show_copy_button: boolean;
-        show_search: "none" | "search" | "filter";
-        show_row_numbers: boolean;
-        editable: boolean;
-        pinned_columns: number;
-        show_label: boolean;
-        line_breaks: boolean;
-        wrap: boolean;
-        max_height: number;
-        column_widths: string[];
-        max_chars?: number;
-        static_columns?: CellValue[];
-    };
-    current_search_query: string | null;
-    sort_state: {
-        sort_columns: {
-            col: number;
-            direction: SortDirection;
-        }[];
-        row_order: number[];
-        initial_data: {
-            data: {
-                id: string;
-                value: CellValue;
-            }[][];
-            display_value: string[][] | null;
-            styling: string[][] | null;
-        } | null;
-    };
-    filter_state: {
-        filter_columns: {
-            col: number;
-            datatype: FilterDatatype;
-            filter: string;
-            value: string;
-        }[];
-        initial_data: {
-            data: {
-                id: string;
-                value: CellValue;
-            }[][];
-            display_value: string[][] | null;
-            styling: string[][] | null;
-        } | null;
-    };
-    ui_state: {
-        active_cell_menu: {
-            row: number;
-            col: number;
-            x: number;
-            y: number;
-        } | null;
-        active_header_menu: {
-            col: number;
-            x: number;
-            y: number;
-        } | null;
-        selected_cells: CellCoordinate[];
-        selected: CellCoordinate | false;
-        editing: CellCoordinate | false;
-        header_edit: number | false;
-        selected_header: number | false;
-        active_button: {
-            type: "header" | "cell";
-            row?: number;
-            col: number;
-        } | null;
-        copy_flash: boolean;
-    };
-}
-interface DataFrameActions {
-    handle_search: (query: string | null) => void;
-    handle_sort: (col: number, direction: SortDirection) => void;
-    handle_filter: (col: number, datatype: FilterDatatype, filter: string, value: string) => void;
-    get_sort_status: (name: string, headers: string[]) => "none" | "asc" | "desc";
-    sort_data: (data: any[][], display_value: string[][] | null, styling: string[][] | null) => void;
-    update_row_order: (data: any[][]) => void;
-    filter_data: (data: any[][]) => any[][];
-    add_row: (data: any[][], make_id: () => string, index?: number) => any[][];
-    add_col: (data: any[][], headers: string[], make_id: () => string, index?: number) => {
-        data: any[][];
-        headers: string[];
-    };
-    add_row_at: (data: any[][], index: number, position: "above" | "below", make_id: () => string) => any[][];
-    add_col_at: (data: any[][], headers: string[], index: number, position: "left" | "right", make_id: () => string) => {
-        data: any[][];
-        headers: string[];
-    };
-    delete_row: (data: any[][], index: number) => any[][];
-    delete_col: (data: any[][], headers: string[], index: number) => {
-        data: any[][];
-        headers: string[];
-    };
-    delete_row_at: (data: any[][], index: number) => any[][];
-    delete_col_at: (data: any[][], headers: string[], index: number) => {
-        data: any[][];
-        headers: string[];
-    };
-    trigger_change: (data: any[][], headers: any[], previous_data: any[][], previous_headers: string[], value_is_output: boolean, dispatch: (e: "change" | "input" | "edit", detail?: any) => void) => Promise<void>;
-    reset_sort_state: () => void;
-    reset_filter_state: () => void;
-    set_active_cell_menu: (menu: {
-        row: number;
-        col: number;
-        x: number;
-        y: number;
-    } | null) => void;
-    set_active_header_menu: (menu: {
-        col: number;
-        x: number;
-        y: number;
-    } | null) => void;
-    set_selected_cells: (cells: CellCoordinate[]) => void;
-    set_selected: (selected: CellCoordinate | false) => void;
-    set_editing: (editing: CellCoordinate | false) => void;
-    clear_ui_state: () => void;
-    set_header_edit: (header_index: number | false) => void;
-    set_selected_header: (header_index: number | false) => void;
-    handle_header_click: (col: number, editable: boolean) => void;
-    end_header_edit: (key: string) => void;
-    get_selected_cells: () => CellCoordinate[];
-    get_active_cell_menu: () => {
-        row: number;
-        col: number;
-        x: number;
-        y: number;
-    } | null;
-    get_active_button: () => {
-        type: "header" | "cell";
-        row?: number;
-        col: number;
-    } | null;
-    set_active_button: (button: {
-        type: "header" | "cell";
-        row?: number;
-        col: number;
-    } | null) => void;
-    set_copy_flash: (value: boolean) => void;
-    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;
-    get_next_cell_coordinates: typeof get_next_cell_coordinates;
-    get_range_selection: typeof get_range_selection;
-    move_cursor: typeof move_cursor;
-}
-export interface DataFrameContext {
-    state: ReturnType<typeof writable<DataFrameState>>;
-    actions: DataFrameActions;
-    data?: any[][];
-    headers?: {
-        id: string;
-        value: string;
-    }[];
-    display_value?: string[][] | null;
-    styling?: string[][] | null;
-    els?: Record<string, {
-        cell: HTMLTableCellElement | null;
-        input: HTMLTextAreaElement | null;
-    }>;
-    parent_element?: HTMLElement;
-    get_data_at?: (row: number, col: number) => CellValue;
-    get_column?: (col: number) => CellValue[];
-    get_row?: (row: number) => CellValue[];
-    dispatch?: (e: "change" | "select" | "search" | "edit", detail?: any) => void;
-}
-export declare function create_dataframe_context(config: DataFrameState["config"]): DataFrameContext;
-export declare function get_dataframe_context(): DataFrameContext;
-export {};