@gradio/dataframe 0.16.5 → 0.17.1

package/dist/shared/VirtualTable.svelte

@@ -1,4 +1,4 @@
-<script>import { onMount, tick } from "svelte";
+<script>import { onMount, tick, createEventDispatcher } from "svelte";
 import { _ } from "svelte-i18n";
 export let items = [];
 export let max_height;
@@ -8,6 +8,9 @@ export let start = 0;
 export let end = 20;
 export let selected;
 export let disable_scroll = false;
+export let show_scroll_button = false;
+export let viewport;
+const dispatch = createEventDispatcher();
 let height = "100%";
 let average_height = 30;
 let bottom = 0;
@@ -18,7 +21,6 @@ let height_map = [];
 let mounted;
 let rows;
 let top = 0;
-let viewport;
 let viewport_height = 200;
 let visible = [];
 let viewport_box;
@@ -120,6 +122,10 @@ function get_computed_px_amount(elem, property) {
 }
 async function handle_scroll(e) {
   const scroll_top = viewport.scrollTop;
+  show_scroll_button = scroll_top > 100;
+  if (show_scroll_button) {
+    dispatch("scroll_top", scroll_top);
+  }
   rows = contents.children;
   const is_start_overflow = sortedItems.length < start;
   const row_top_border = get_computed_px_amount(rows[1], "border-top-width");
@@ -236,8 +242,7 @@ onMount(() => {
 <style>
 	table {
 		position: relative;
-		overflow-y: scroll;
-		overflow-x: scroll;
+		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		max-height: var(--max-height);
 		box-sizing: border-box;
@@ -252,7 +257,52 @@ onMount(() => {
 		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;
@@ -287,46 +337,43 @@ onMount(() => {
 		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/dist/shared/VirtualTable.svelte.d.ts

@@ -9,9 +9,13 @@ declare const __propDef: {
         end?: number | undefined;
         selected: number | false;
         disable_scroll?: boolean | undefined;
+        show_scroll_button?: boolean | undefined;
+        viewport: HTMLTableElement;
         scroll_to_index?: ((index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>) | undefined;
     };
     events: {
+        scroll_top: CustomEvent<number>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -0,0 +1,37 @@
+import type { DataFrameContext } from "./table_context";
+import type { CellData } from "../selection_utils";
+import type { DataframeValue } from "../utils";
+import type { CellCoordinate } from "../types";
+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 declare function create_keyboard_context(context: KeyboardContext): KeyboardContext;
+export declare function get_keyboard_context(): KeyboardContext | undefined;

package/dist/shared/context/keyboard_context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const KEYBOARD_KEY = Symbol("keyboard");
+export function create_keyboard_context(context) {
+    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() {
+    const ctx = getContext(KEYBOARD_KEY);
+    return ctx ? ctx.context : getContext(KEYBOARD_KEY);
+}

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

@@ -0,0 +1,32 @@
+import type { DataFrameContext } from "./table_context";
+import type { CellData } from "../selection_utils";
+import type { DataframeValue } from "../utils";
+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 declare function create_selection_context(context: Omit<SelectionContext, "actions">): SelectionContext;
+export declare function get_selection_context(): SelectionContext;

package/dist/shared/context/selection_context.js

@@ -0,0 +1,107 @@
+import { getContext, setContext } from "svelte";
+import { tick } from "svelte";
+import { handle_selection } from "../selection_utils";
+const SELECTION_KEY = Symbol("selection");
+export function create_selection_context(context) {
+    const instance_id = Symbol(`selection_${Math.random().toString(36).substring(2)}`);
+    const actions = {
+        handle_cell_click: (event, row, col) => {
+            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, row, col) => {
+            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.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, col) => {
+            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", row, col };
+            context.df_actions.set_active_button(new_button);
+        },
+        handle_select_column: (col) => {
+            const selected_cells = context.data.map((_, row) => [row, col]);
+            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) => {
+            const selected_cells = context.data[0].map((_, col) => [row, col]);
+            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() {
+    const ctx = getContext(SELECTION_KEY);
+    return ctx ? ctx.context : getContext(SELECTION_KEY);
+}

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

@@ -0,0 +1,141 @@
+import type { Writable } from "svelte/store";
+import type { DataframeValue } from "../utils";
+export declare const DATAFRAME_KEY: unique symbol;
+export type SortDirection = "asc" | "desc";
+export type 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 | undefined;
+    };
+    current_search_query: string | null;
+    sort_state: {
+        sort_columns: {
+            col: number;
+            direction: SortDirection;
+        }[];
+        row_order: number[];
+    };
+    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: [number, number][];
+        selected: [number, number] | false;
+        editing: [number, number] | false;
+        header_edit: number | false;
+        selected_header: number | false;
+        active_button: {
+            type: "header" | "cell";
+            row?: number;
+            col: number;
+        } | null;
+    };
+};
+export interface DataFrameContext {
+    state: Writable<DataFrameState>;
+    actions: {
+        handle_search: (search_query: string | null) => void;
+        handle_sort: (col: number, direction: SortDirection) => 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[];
+        };
+        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: [number, number][]) => void;
+        set_selected: (selected: [number, number] | false) => void;
+        set_editing: (editing: [number, number] | 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;
+        trigger_change: (data: any[][], headers: any[], previous_data: string[][], previous_headers: string[], value_is_output: boolean, dispatch: {
+            (e: "change", detail: DataframeValue): void;
+            (e: "input", detail?: undefined): void;
+            (e: "select", detail: any): void;
+            (e: "search", detail: string | null): void;
+        }) => Promise<void>;
+        get_selected_cells: () => [number, number][];
+        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;
+        reset_sort_state: () => void;
+    };
+}
+export declare function create_actions(state: Writable<DataFrameState>): DataFrameContext["actions"];
+export declare function create_dataframe_context(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 | undefined;
+}): DataFrameContext;
+export declare function get_dataframe_context(): DataFrameContext;