@gradio/dataframe 0.16.5 → 0.17.1

package/dist/shared/icons/SortIcon.svelte

@@ -1,56 +1,39 @@
 <script>import { createEventDispatcher } from "svelte";
+import SortButtonUp from "./SortButtonUp.svelte";
+import SortButtonDown from "./SortButtonDown.svelte";
+import { IconButton } from "@gradio/atoms";
 export let direction = null;
+export let priority = null;
 export let i18n;
 const dispatch = createEventDispatcher();
 </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"
+	{#if (direction === "asc" || direction === "desc") && priority !== null}
+		<span aria-label={`Sort priority: ${priority}`} class="priority"
+			>{priority}</span
 		>
-			<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"
-		>
-			<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>
@@ -58,33 +41,28 @@ const dispatch = createEventDispatcher();
 		display: flex;
 		flex-direction: column;
 		gap: 0;
-		margin-right: var(--spacing-md);
+		margin-right: var(--spacing-sm);
+	}
+
+	.sort-icons :global(button) {
+		margin-bottom: var(--spacing-xs);
+		border: 1px solid var(--border-color-primary);
+		background: unset;
 	}
 
-	.sort-button {
+	.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/dist/shared/icons/SortIcon.svelte.d.ts

@@ -2,11 +2,12 @@ import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        direction?: (("asc" | "des") | null) | undefined;
+        direction?: (("asc" | "desc") | null) | undefined;
+        priority?: (number | null) | undefined;
         i18n: I18nFormatter;
     };
     events: {
-        sort: CustomEvent<"asc" | "des">;
+        sort: CustomEvent<"asc" | "desc">;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/selection_utils.d.ts

@@ -3,6 +3,7 @@ export type CellData = {
     id: string;
     value: string | number;
 };
+export declare function is_cell_in_selection(coords: [number, number], selected_cells: [number, number][]): boolean;
 export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
 export declare function get_range_selection(start: CellCoordinate, end: CellCoordinate): CellCoordinate[];
 export declare function handle_selection(current: CellCoordinate, selected_cells: CellCoordinate[], event: {
@@ -14,7 +15,7 @@ export declare function handle_delete_key(data: CellData[][], selected_cells: Ce
 export declare function handle_editing_state(current: CellCoordinate, editing: EditingState, selected_cells: CellCoordinate[], editable: boolean): EditingState;
 export declare function should_show_cell_menu(cell: CellCoordinate, selected_cells: CellCoordinate[], editable: boolean): boolean;
 export declare function get_next_cell_coordinates(current: CellCoordinate, data: CellData[][], shift_key: boolean): CellCoordinate | false;
-export declare function move_cursor(key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp", current_coords: CellCoordinate, data: CellData[][]): CellCoordinate | false;
+export declare function move_cursor(event: KeyboardEvent, current_coords: CellCoordinate, data: CellData[][]): CellCoordinate | false;
 export declare function get_current_indices(id: string, data: CellData[][]): [number, number];
 export declare function handle_click_outside(event: Event, parent: HTMLElement): boolean;
 export declare function select_column(data: any[][], col: number): CellCoordinate[];

package/dist/shared/selection_utils.js

@@ -1,3 +1,7 @@
+export function is_cell_in_selection(coords, selected_cells) {
+    const [row, col] = coords;
+    return selected_cells.some(([r, c]) => r === row && c === col);
+}
 export function is_cell_selected(cell, selected_cells) {
     const [row, col] = cell;
     if (!selected_cells.some(([r, c]) => r === row && c === col))
@@ -16,8 +20,14 @@ export function get_range_selection(start, end) {
     const min_col = Math.min(start_col, end_col);
     const max_col = Math.max(start_col, end_col);
     const cells = [];
+    // 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]);
         }
     }
@@ -81,15 +91,40 @@ export function get_next_cell_coordinates(current, data, shift_key) {
     }
     return false;
 }
-export function move_cursor(key, current_coords, data) {
+export function move_cursor(event, current_coords, data) {
+    const key = event.key;
     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];
+    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;
     }
@@ -120,20 +155,14 @@ export function calculate_selection_positions(selected, data, els, parent, table
     if (!data[row]?.[col]) {
         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/dist/shared/utils/data_processing.d.ts

@@ -0,0 +1,13 @@
+import type { Headers, HeadersWithIDs } from "../utils";
+export declare function make_headers(_head: Headers, col_count: [number, "fixed" | "dynamic"], els: Record<string, {
+    cell: null | HTMLTableCellElement;
+    input: null | HTMLInputElement;
+}>, make_id: () => string): HeadersWithIDs;
+export declare 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): {
+    id: string;
+    value: string | number;
+    display_value?: string;
+}[][];

package/dist/shared/utils/data_processing.js

@@ -0,0 +1,45 @@
+export function make_headers(_head, col_count, els, make_id) {
+    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, els, data_binding, make_id, display_value = null) {
+    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/dist/shared/utils/drag_utils.d.ts

@@ -0,0 +1,15 @@
+import type { CellCoordinate } from "../types";
+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 declare 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;

package/dist/shared/utils/drag_utils.js

@@ -0,0 +1,57 @@
+import { get_range_selection } from "../selection_utils";
+export function create_drag_handlers(state, set_is_dragging, set_selected_cells, set_selected, handle_cell_click, show_row_numbers, parent_element) {
+    const start_drag = (event, row, col) => {
+        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) => {
+        const cell = event.target.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) => {
+        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) {
+            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
+    };
+}

package/dist/shared/utils/keyboard_utils.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardContext } from "../context/keyboard_context";
+export declare function handle_keydown(event: KeyboardEvent, context: KeyboardContext): Promise<void>;

package/dist/shared/utils/keyboard_utils.js

@@ -0,0 +1,186 @@
+import { dequal } from "dequal/lite";
+import { handle_delete_key } from "../selection_utils";
+import { tick } from "svelte";
+import { copy_table_data } from "./table_utils";
+function handle_header_navigation(event, ctx) {
+    if (ctx.selected_header === false || ctx.header_edit !== false)
+        return false;
+    switch (event.key) {
+        case "ArrowDown":
+            ctx.df_actions.set_selected_header(false);
+            ctx.df_actions.set_selected([0, ctx.selected_header]);
+            ctx.df_actions.set_selected_cells([[0, ctx.selected_header]]);
+            return true;
+        case "ArrowLeft":
+            ctx.df_actions.set_selected_header(ctx.selected_header > 0 ? ctx.selected_header - 1 : ctx.selected_header);
+            return true;
+        case "ArrowRight":
+            ctx.df_actions.set_selected_header(ctx.selected_header < ctx.headers.length - 1
+                ? ctx.selected_header + 1
+                : ctx.selected_header);
+            return true;
+        case "Escape":
+            event.preventDefault();
+            ctx.df_actions.set_selected_header(false);
+            return true;
+        case "Enter":
+            event.preventDefault();
+            if (ctx.editable) {
+                ctx.df_actions.set_header_edit(ctx.selected_header);
+            }
+            return true;
+    }
+    return false;
+}
+function handle_delete_operation(event, ctx) {
+    if (!ctx.editable)
+        return false;
+    if (event.key !== "Delete" && event.key !== "Backspace")
+        return false;
+    if (ctx.editing) {
+        const [row, col] = ctx.editing;
+        const input_el = ctx.els[ctx.data[row][col].id].input;
+        if (input_el && input_el.selectionStart !== input_el.selectionEnd) {
+            return false;
+        }
+        if (event.key === "Delete" &&
+            input_el?.selectionStart !== input_el?.value.length) {
+            return false;
+        }
+        if (event.key === "Backspace" && input_el?.selectionStart !== 0) {
+            return false;
+        }
+    }
+    event.preventDefault();
+    if (ctx.selected_cells.length > 0) {
+        const new_data = handle_delete_key(ctx.data, ctx.selected_cells);
+        ctx.dispatch("change", {
+            data: new_data.map((row) => row.map((cell) => cell.value)),
+            headers: ctx.headers.map((h) => h.value),
+            metadata: null
+        });
+        ctx.dispatch("input");
+    }
+    return true;
+}
+function handle_arrow_keys(event, ctx, i, j) {
+    if (ctx.editing)
+        return false;
+    event.preventDefault();
+    const next_coords = ctx.move_cursor(event, [i, j], ctx.data);
+    if (next_coords) {
+        if (event.shiftKey) {
+            ctx.df_actions.set_selected_cells(ctx.get_range_selection(ctx.selected_cells.length > 0 ? ctx.selected_cells[0] : [i, j], next_coords));
+            ctx.df_actions.set_editing(false);
+        }
+        else {
+            ctx.df_actions.set_selected_cells([next_coords]);
+            ctx.df_actions.set_editing(false);
+        }
+        ctx.df_actions.set_selected(next_coords);
+    }
+    else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
+        ctx.df_actions.set_selected_header(j);
+        ctx.df_actions.set_selected(false);
+        ctx.df_actions.set_selected_cells([]);
+        ctx.df_actions.set_editing(false);
+    }
+    return true;
+}
+async function handle_enter_key(event, ctx, i, j) {
+    event.preventDefault();
+    if (!ctx.editable)
+        return false;
+    if (event.shiftKey) {
+        await ctx.add_row(i);
+        await tick();
+        ctx.df_actions.set_selected([i + 1, j]);
+    }
+    else {
+        if (dequal(ctx.editing, [i, j])) {
+            const cell_id = ctx.data[i][j].id;
+            const input_el = ctx.els[cell_id].input;
+            if (input_el) {
+                const old_value = ctx.data[i][j].value;
+                ctx.data[i][j].value = input_el.value;
+                if (old_value !== input_el.value) {
+                    ctx.dispatch("input");
+                }
+            }
+            ctx.df_actions.set_editing(false);
+            await tick();
+            ctx.df_actions.set_selected([i, j]);
+        }
+        else {
+            ctx.df_actions.set_editing([i, j]);
+        }
+    }
+    return true;
+}
+function handle_tab_key(event, ctx, i, j) {
+    event.preventDefault();
+    ctx.df_actions.set_editing(false);
+    const next_cell = ctx.get_next_cell_coordinates([i, j], ctx.data, event.shiftKey);
+    if (next_cell) {
+        ctx.df_actions.set_selected_cells([next_cell]);
+        ctx.df_actions.set_selected(next_cell);
+        if (ctx.editable) {
+            ctx.df_actions.set_editing(next_cell);
+        }
+    }
+    return true;
+}
+function handle_default_key(event, ctx, i, j) {
+    if (!ctx.editable)
+        return false;
+    if ((!ctx.editing || (ctx.editing && dequal(ctx.editing, [i, j]))) &&
+        event.key.length === 1) {
+        ctx.df_actions.set_editing([i, j]);
+        return true;
+    }
+    return false;
+}
+async function handle_cell_navigation(event, ctx) {
+    if (!ctx.selected)
+        return false;
+    if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        if (ctx.selected_cells.length > 0) {
+            await copy_table_data(ctx.data, ctx.selected_cells);
+        }
+        ctx.set_copy_flash(true);
+        return true;
+    }
+    const [i, j] = ctx.selected;
+    switch (event.key) {
+        case "ArrowRight":
+        case "ArrowLeft":
+        case "ArrowDown":
+        case "ArrowUp":
+            return handle_arrow_keys(event, ctx, i, j);
+        case "Escape":
+            if (!ctx.editable)
+                return false;
+            event.preventDefault();
+            ctx.df_actions.set_editing(false);
+            tick().then(() => {
+                if (ctx.parent_element) {
+                    ctx.parent_element.focus();
+                }
+            });
+            return true;
+        case "Enter":
+            return await handle_enter_key(event, ctx, i, j);
+        case "Tab":
+            return handle_tab_key(event, ctx, i, j);
+        default:
+            return handle_default_key(event, ctx, i, j);
+    }
+}
+export async function handle_keydown(event, context) {
+    if (handle_header_navigation(event, context))
+        return;
+    if (handle_delete_operation(event, context))
+        return;
+    await handle_cell_navigation(event, context);
+}

package/dist/shared/utils/sort_utils.d.ts

@@ -1,7 +1,26 @@
 import type { Headers } from "../types";
-export type SortDirection = "asc" | "des";
-export declare function get_sort_status(name: string, sort_by: number | undefined, direction: SortDirection | undefined, headers: Headers): "none" | "ascending" | "descending";
+export type SortDirection = "asc" | "desc";
+export declare function get_sort_status(name: string, sort_columns: {
+    col: number;
+    direction: SortDirection;
+}[], headers: Headers): "none" | "asc" | "desc";
 export declare function sort_data(data: {
     id: string;
     value: string | number;
-}[][], sort_by: number | undefined, sort_direction: SortDirection | undefined): number[];
+}[][], sort_columns: {
+    col: number;
+    direction: SortDirection;
+}[]): number[];
+export declare function sort_data_and_preserve_selection(data: {
+    id: string;
+    value: string | number;
+}[][], display_value: string[][] | null, styling: string[][] | null, sort_columns: {
+    col: number;
+    direction: SortDirection;
+}[], selected: [number, number] | false, get_current_indices: (id: string, data: {
+    id: string;
+    value: string | number;
+}[][]) => [number, number]): {
+    data: typeof data;
+    selected: [number, number] | false;
+};