@gradio/dataframe 0.16.5 → 0.17.1

package/dist/shared/utils/sort_utils.js

@@ -1,39 +1,59 @@
-export function get_sort_status(name, sort_by, direction, headers) {
-    if (typeof sort_by !== "number")
+import { sort_table_data } from "./table_utils";
+export function get_sort_status(name, sort_columns, headers) {
+    if (!sort_columns.length)
         return "none";
-    if (sort_by < 0 || sort_by >= headers.length)
+    const sort_item = sort_columns.find((item) => {
+        const col = item.col;
+        if (col < 0 || col >= headers.length)
+            return false;
+        return headers[col] === name;
+    });
+    if (!sort_item)
         return "none";
-    if (headers[sort_by] === name) {
-        if (direction === "asc")
-            return "ascending";
-        if (direction === "des")
-            return "descending";
-    }
-    return "none";
+    return sort_item.direction;
 }
-export function sort_data(data, sort_by, sort_direction) {
+export function sort_data(data, sort_columns) {
     if (!data || !data.length || !data[0]) {
         return [];
     }
-    if (typeof sort_by === "number" &&
-        sort_direction &&
-        sort_by >= 0 &&
-        sort_by < data[0].length) {
+    if (sort_columns.length > 0) {
         const row_indices = [...Array(data.length)].map((_, i) => i);
         row_indices.sort((row_a_idx, row_b_idx) => {
             const row_a = data[row_a_idx];
             const row_b = data[row_b_idx];
-            if (!row_a ||
-                !row_b ||
-                sort_by >= row_a.length ||
-                sort_by >= row_b.length)
-                return 0;
-            const val_a = row_a[sort_by].value;
-            const val_b = row_b[sort_by].value;
-            const comparison = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
-            return sort_direction === "asc" ? comparison : -comparison;
+            for (const { col: sort_by, direction } of sort_columns) {
+                if (!row_a ||
+                    !row_b ||
+                    sort_by < 0 ||
+                    sort_by >= row_a.length ||
+                    sort_by >= row_b.length ||
+                    !row_a[sort_by] ||
+                    !row_b[sort_by]) {
+                    continue;
+                }
+                const val_a = row_a[sort_by].value;
+                const val_b = row_b[sort_by].value;
+                const comparison = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
+                if (comparison !== 0) {
+                    return direction === "asc" ? comparison : -comparison;
+                }
+            }
+            return 0;
         });
         return row_indices;
     }
     return [...Array(data.length)].map((_, i) => i);
 }
+export function sort_data_and_preserve_selection(data, display_value, styling, sort_columns, selected, get_current_indices) {
+    let id = null;
+    if (selected && selected[0] in data && selected[1] in data[selected[0]]) {
+        id = data[selected[0]][selected[1]].id;
+    }
+    sort_table_data(data, display_value, styling, sort_columns);
+    let new_selected = selected;
+    if (id) {
+        const [i, j] = get_current_indices(id, data);
+        new_selected = [i, j];
+    }
+    return { data, selected: new_selected };
+}

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

@@ -1,12 +1,13 @@
-import type { Headers, HeadersWithIDs, TableCell, TableData, CountConfig, ElementRefs, DataBinding } from "../types";
+import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
 import type { SortDirection } from "./sort_utils";
 export declare function make_cell_id(row: number, col: number): string;
 export declare function make_header_id(col: number): string;
-export declare function process_data(input_values: (string | number)[][], row_count: CountConfig, col_count: CountConfig, headers: Headers, show_row_numbers: boolean, element_refs: ElementRefs, data_binding: DataBinding): TableData;
-export declare function make_headers(input_headers: Headers, show_row_numbers: boolean, col_count: CountConfig, element_refs: ElementRefs): HeadersWithIDs[];
 export declare function get_max(data: TableData): TableCell[];
-export declare function sort_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, col: number, dir: SortDirection): void;
-export declare function copy_table_data(data: TableData, selected_cells: [number, number][]): Promise<void>;
+export declare function sort_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, sort_columns: {
+    col: number;
+    direction: SortDirection;
+}[]): void;
+export declare function copy_table_data(data: TableData, selected_cells: [number, number][] | null): Promise<void>;
 export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
 export declare function data_uri_to_blob(data_uri: string): Blob;
 export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: (string | number)[][]) => void): void;

package/dist/shared/utils/table_utils.js

@@ -6,58 +6,6 @@ export function make_cell_id(row, col) {
 export function make_header_id(col) {
     return `header-${col}`;
 }
-export function process_data(input_values, row_count, col_count, headers, show_row_numbers, element_refs, data_binding) {
-    const data_row_length = input_values.length;
-    return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length)
-        .fill(0)
-        .map((_, row) => {
-        return Array(col_count[1] === "fixed"
-            ? col_count[0]
-            : data_row_length > 0
-                ? input_values[0].length
-                : headers.length)
-            .fill(0)
-            .map((_, col) => {
-            const cell_id = make_cell_id(row, col);
-            element_refs[cell_id] = element_refs[cell_id] || {
-                input: null,
-                cell: null
-            };
-            const cell_obj = {
-                value: input_values?.[row]?.[col] ?? "",
-                id: cell_id
-            };
-            data_binding[cell_id] = cell_obj;
-            return cell_obj;
-        });
-    });
-}
-export function make_headers(input_headers, show_row_numbers, col_count, element_refs) {
-    let header_list = input_headers || [];
-    if (show_row_numbers) {
-        header_list = ["", ...header_list];
-    }
-    if (col_count[1] === "fixed" && header_list.length < col_count[0]) {
-        const fill_headers = Array(col_count[0] - header_list.length)
-            .fill("")
-            .map((_, i) => `${i + header_list.length}`);
-        header_list = header_list.concat(fill_headers);
-    }
-    if (!header_list || header_list.length === 0) {
-        return Array(col_count[0])
-            .fill(0)
-            .map((_, col) => {
-            const header_id = make_header_id(col);
-            element_refs[header_id] = { cell: null, input: null };
-            return { id: header_id, value: JSON.stringify(col + 1) };
-        });
-    }
-    return header_list.map((header, col) => {
-        const header_id = make_header_id(col);
-        element_refs[header_id] = { cell: null, input: null };
-        return { id: header_id, value: header ?? "" };
-    });
-}
 export function get_max(data) {
     if (!data || !data.length)
         return [];
@@ -71,8 +19,12 @@ export function get_max(data) {
     }
     return max;
 }
-export function sort_table_data(data, display_value, styling, col, dir) {
-    const indices = sort_data(data, col, dir);
+export function sort_table_data(data, display_value, styling, sort_columns) {
+    if (!sort_columns.length)
+        return;
+    if (!data || !data.length)
+        return;
+    const indices = sort_data(data, sort_columns);
     const new_data = indices.map((i) => data[i]);
     data.splice(0, data.length, ...new_data);
     if (display_value) {
@@ -85,7 +37,11 @@ export function sort_table_data(data, display_value, styling, col, dir) {
     }
 }
 export async function copy_table_data(data, selected_cells) {
-    const csv = selected_cells.reduce((acc, [row, col]) => {
+    if (!data || !data.length)
+        return;
+    const cells_to_copy = selected_cells ||
+        data.flatMap((row, r) => row.map((_, c) => [r, c]));
+    const csv = cells_to_copy.reduce((acc, [row, col]) => {
         acc[row] = acc[row] || {};
         const value = String(data[row][col].value);
         acc[row][col] =
@@ -95,6 +51,8 @@ export async function copy_table_data(data, selected_cells) {
         return acc;
     }, {});
     const rows = Object.keys(csv).sort((a, b) => +a - +b);
+    if (!rows.length)
+        return;
     const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
     const text = rows
         .map((r) => cols.map((c) => csv[r][c] || "").join(","))
@@ -103,7 +61,6 @@ export async function copy_table_data(data, selected_cells) {
         await navigator.clipboard.writeText(text);
     }
     catch (err) {
-        console.error("Copy failed:", err);
         throw new Error("Failed to copy to clipboard: " + err.message);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.16.5",
+  "version": "0.17.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.13.3",
-    "@gradio/button": "^0.4.9",
+    "@gradio/atoms": "^0.14.0",
+    "@gradio/button": "^0.4.10",
     "@gradio/client": "^1.13.1",
     "@gradio/icons": "^0.10.0",
-    "@gradio/markdown-code": "^0.4.0",
-    "@gradio/statustracker": "^0.10.4",
-    "@gradio/upload": "^0.15.4",
-    "@gradio/utils": "^0.10.1"
+    "@gradio/upload": "^0.15.5",
+    "@gradio/statustracker": "^0.10.5",
+    "@gradio/utils": "^0.10.1",
+    "@gradio/markdown-code": "^0.4.1"
   },
   "exports": {
     ".": {

package/shared/CellMenu.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from "svelte";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { I18nFormatter } from "js/utils/src";
+	import type { SortDirection } from "./context/table_context";
 
 	export let x: number;
 	export let y: number;
@@ -16,13 +17,18 @@
 	export let on_delete_col: () => void;
 	export let can_delete_rows: boolean;
 	export let can_delete_cols: boolean;
+	export let on_sort: (direction: SortDirection) => void = () => {};
+	export let on_clear_sort: () => void = () => {};
+	export let sort_direction: SortDirection | null = null;
+	export let sort_priority: number | null = null;
+	export let editable = true;
 
 	export let i18n: I18nFormatter;
 	let menu_element: HTMLDivElement;
 
 	$: is_header = row === -1;
-	$: can_add_rows = row_count[1] === "dynamic";
-	$: can_add_columns = col_count[1] === "dynamic";
+	$: can_add_rows = editable && row_count[1] === "dynamic";
+	$: can_add_columns = editable && col_count[1] === "dynamic";
 
 	onMount(() => {
 		position_menu();
@@ -51,34 +57,89 @@
 	}
 </script>
 
-<div bind:this={menu_element} class="cell-menu">
+<div bind:this={menu_element} class="cell-menu" role="menu">
+	{#if is_header}
+		<button
+			role="menuitem"
+			on:click={() => on_sort("asc")}
+			class:active={sort_direction === "asc"}
+		>
+			<CellMenuIcons icon="sort-asc" />
+			{i18n("dataframe.sort_ascending")}
+			{#if sort_direction === "asc" && sort_priority !== null}
+				<span class="priority">{sort_priority}</span>
+			{/if}
+		</button>
+		<button
+			role="menuitem"
+			on:click={() => on_sort("desc")}
+			class:active={sort_direction === "desc"}
+		>
+			<CellMenuIcons icon="sort-desc" />
+			{i18n("dataframe.sort_descending")}
+			{#if sort_direction === "desc" && sort_priority !== null}
+				<span class="priority">{sort_priority}</span>
+			{/if}
+		</button>
+		<button role="menuitem" on:click={on_clear_sort}>
+			<CellMenuIcons icon="clear-sort" />
+			{i18n("dataframe.clear_sort")}
+		</button>
+	{/if}
+
 	{#if !is_header && can_add_rows}
-		<button on:click={() => on_add_row_above()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_row_above()}
+			aria-label="Add row above"
+		>
 			<CellMenuIcons icon="add-row-above" />
 			{i18n("dataframe.add_row_above")}
 		</button>
-		<button on:click={() => on_add_row_below()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_row_below()}
+			aria-label="Add row below"
+		>
 			<CellMenuIcons icon="add-row-below" />
 			{i18n("dataframe.add_row_below")}
 		</button>
 		{#if can_delete_rows}
-			<button on:click={on_delete_row} class="delete">
+			<button
+				role="menuitem"
+				on:click={on_delete_row}
+				class="delete"
+				aria-label="Delete row"
+			>
 				<CellMenuIcons icon="delete-row" />
 				{i18n("dataframe.delete_row")}
 			</button>
 		{/if}
 	{/if}
 	{#if can_add_columns}
-		<button on:click={() => on_add_column_left()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_column_left()}
+			aria-label="Add column to the left"
+		>
 			<CellMenuIcons icon="add-column-left" />
 			{i18n("dataframe.add_column_left")}
 		</button>
-		<button on:click={() => on_add_column_right()}>
+		<button
+			role="menuitem"
+			on:click={() => on_add_column_right()}
+			aria-label="Add column to the right"
+		>
 			<CellMenuIcons icon="add-column-right" />
 			{i18n("dataframe.add_column_right")}
 		</button>
 		{#if can_delete_cols}
-			<button on:click={on_delete_col} class="delete">
+			<button
+				role="menuitem"
+				on:click={on_delete_col}
+				class="delete"
+				aria-label="Delete column"
+			>
 				<CellMenuIcons icon="delete-column" />
 				{i18n("dataframe.delete_column")}
 			</button>
@@ -89,7 +150,7 @@
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: var(--layer-4);
+		z-index: 9;
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);
@@ -99,6 +160,7 @@
 		gap: var(--size-1);
 		box-shadow: var(--shadow-drop-lg);
 		min-width: 150px;
+		z-index: var(--layer-1);
 	}
 
 	.cell-menu button {
@@ -116,6 +178,11 @@
 		display: flex;
 		align-items: center;
 		gap: var(--size-2);
+		position: relative;
+	}
+
+	.cell-menu button.active {
+		background-color: var(--background-fill-secondary);
 	}
 
 	.cell-menu button:hover {
@@ -126,4 +193,17 @@
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
+
+	.priority {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		font-size: var(--size-2);
+		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/CellMenuButton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	export let on_click: (event: MouseEvent) => void;
+</script>
+
+<button
+	aria-label="Open cell menu"
+	class="cell-menu-button"
+	aria-haspopup="menu"
+	on:click={on_click}
+	on:touchstart={(event) => {
+		event.preventDefault();
+		const touch = event.touches[0];
+		const mouseEvent = new MouseEvent("click", {
+			clientX: touch.clientX,
+			clientY: touch.clientY,
+			bubbles: true,
+			cancelable: true,
+			view: window
+		});
+		on_click(mouseEvent);
+	}}
+>
+	&#8942;
+</button>
+
+<style>
+	.cell-menu-button {
+		flex-shrink: 0;
+		display: none;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--block-radius);
+		width: var(--size-5);
+		height: var(--size-5);
+		min-width: var(--size-5);
+		padding: 0;
+		margin-right: var(--spacing-sm);
+		z-index: 2;
+		position: absolute;
+		right: var(--size-1);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+</style>

package/shared/CellMenuIcons.svelte

@@ -110,4 +110,83 @@
 			stroke-linecap="round"
 		/>
 	</svg>
+{:else if icon == "sort-asc"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M8 16L12 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 12V19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 7H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "sort-desc"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M8 12L12 16L16 12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 16V9"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "clear-sort"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 9H15"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 13H11"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 17H7"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M17 17L21 21M21 17L17 21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
 {/if}