@gradio/dataframe 0.17.11 → 0.17.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gradio/dataframe
 
+## 0.17.12
+
+### Features
+
+- [#11177](https://github.com/gradio-app/gradio/pull/11177) [`3068196`](https://github.com/gradio-app/gradio/commit/3068196d47234fd1c1634f33b9ddfc089f5cbbe0) - Improved, smoother fullscreen mode for components.  Thanks @aliabid94!
+
+### Fixes
+
+- [#11221](https://github.com/gradio-app/gradio/pull/11221) [`5f3e84d`](https://github.com/gradio-app/gradio/commit/5f3e84d870572b2851a5243be341d7aab4e166c1) - Ensure Clear sort works as expected.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.11
+- @gradio/atoms@0.16.1
+- @gradio/client@1.15.0
+- @gradio/upload@0.16.5
+- @gradio/button@0.5.0
+
 ## 0.17.11
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -364,7 +364,7 @@
 		await userEvent.click(copy_button);
 
 		const fullscreen_button = canvas.getByRole("button", {
-			name: "Enter fullscreen"
+			name: "Fullscreen"
 		});
 		await userEvent.click(fullscreen_button);
 

package/Index.svelte

@@ -58,6 +58,7 @@
 	export let show_search: "none" | "search" | "filter" = "none";
 	export let pinned_columns = 0;
 	export let static_columns: (string | number)[] = [];
+	export let fullscreen = false;
 
 	$: _headers = [...(value.headers || headers)];
 	$: display_value = value?.metadata?.display_value
@@ -78,6 +79,7 @@
 	{scale}
 	{min_width}
 	overflow_behavior="visible"
+	bind:fullscreen
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -95,6 +97,7 @@
 		{display_value}
 		{styling}
 		headers={_headers}
+		{fullscreen}
 		on:change={(e) => {
 			value.data = e.detail.data;
 			value.headers = e.detail.headers;
@@ -102,6 +105,9 @@
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:fullscreen={({ detail }) => {
+			fullscreen = detail;
+		}}
 		{wrap}
 		{datatype}
 		{latex_delimiters}

package/dist/Index.svelte

@@ -41,6 +41,7 @@ export let show_row_numbers = false;
 export let show_search = "none";
 export let pinned_columns = 0;
 export let static_columns = [];
+export let fullscreen = false;
 $:
   _headers = [...value.headers || headers];
 $:
@@ -58,6 +59,7 @@ $:
 	{scale}
 	{min_width}
 	overflow_behavior="visible"
+	bind:fullscreen
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -75,6 +77,7 @@ $:
 		{display_value}
 		{styling}
 		headers={_headers}
+		{fullscreen}
 		on:change={(e) => {
 			value.data = e.detail.data;
 			value.headers = e.detail.headers;
@@ -82,6 +85,9 @@ $:
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:fullscreen={({ detail }) => {
+			fullscreen = detail;
+		}}
 		{wrap}
 		{datatype}
 		{latex_delimiters}

package/dist/Index.svelte.d.ts

@@ -45,6 +45,7 @@ declare const __propDef: {
         show_search?: ("none" | "search" | "filter") | undefined;
         pinned_columns?: number | undefined;
         static_columns?: (string | number)[] | undefined;
+        fullscreen?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -162,4 +163,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get static_columns(): (string | number)[] | undefined;
     /**accessor*/
     set static_columns(_: (string | number)[] | undefined);
+    get fullscreen(): boolean | undefined;
+    /**accessor*/
+    set fullscreen(_: boolean | undefined);
 }

package/dist/shared/Table.svelte

@@ -59,6 +59,7 @@ export let max_chars = void 0;
 export let show_search = "none";
 export let pinned_columns = 0;
 export let static_columns = [];
+export let fullscreen = false;
 const df_ctx = create_dataframe_context({
   show_fullscreen_button,
   show_copy_button,
@@ -110,23 +111,21 @@ onMount(() => {
   observer.observe(parent);
   document.addEventListener("click", handle_click_outside);
   window.addEventListener("resize", handle_resize);
-  document.addEventListener("fullscreenchange", handle_fullscreen_change);
   return () => {
     observer.disconnect();
     document.removeEventListener("click", handle_click_outside);
     window.removeEventListener("resize", handle_resize);
-    document.removeEventListener(
-      "fullscreenchange",
-      handle_fullscreen_change
-    );
   };
 });
-$:
+$: {
   if (data || _headers || els) {
     df_ctx.data = data;
     df_ctx.headers = _headers;
     df_ctx.els = els;
+    df_ctx.display_value = display_value;
+    df_ctx.styling = styling;
   }
+}
 const dispatch = createEventDispatcher();
 let els = {};
 let data_binding = {};
@@ -135,7 +134,6 @@ let old_headers = headers;
 let data = [[]];
 let old_val = void 0;
 let search_results = [[]];
-let is_fullscreen = false;
 let dragging = false;
 let color_accent_copied;
 let filtered_to_original_map = [];
@@ -188,6 +186,9 @@ $:
       df_actions.reset_sort_state();
     } else if ($df_state.sort_state.sort_columns.length > 0) {
       sort_data(data, display_value, styling);
+    } else {
+      df_actions.handle_sort(-1, "asc");
+      df_actions.reset_sort_state();
     }
     if ($df_state.current_search_query) {
       df_actions.handle_search(null);
@@ -250,7 +251,6 @@ function handle_sort(col, direction) {
 }
 function clear_sort() {
   df_actions.reset_sort_state();
-  sort_data(data, display_value, styling);
 }
 $:
   if ($df_state.sort_state.sort_columns.length > 0) {
@@ -403,18 +403,6 @@ function handle_blur(event) {
   const { blur_event, coords } = event.detail;
   handle_cell_blur(blur_event, df_ctx, coords);
 }
-function toggle_fullscreen() {
-  if (!document.fullscreenElement) {
-    parent.requestFullscreen();
-    is_fullscreen = true;
-  } else {
-    document.exitFullscreen();
-    is_fullscreen = false;
-  }
-}
-function handle_fullscreen_change() {
-  is_fullscreen = !!document.fullscreenElement;
-}
 function toggle_header_menu(event, col) {
   event.stopPropagation();
   if (active_header_menu && active_header_menu.col === col) {
@@ -602,12 +590,12 @@ function get_cell_display_value(row, col) {
 			{/if}
 			<Toolbar
 				{show_fullscreen_button}
-				{is_fullscreen}
-				on:click={toggle_fullscreen}
+				{fullscreen}
 				on_copy={async () => await copy_table_data(data, null)}
 				{show_copy_button}
 				{show_search}
 				on:search={(e) => df_actions.handle_search(e.detail)}
+				on:fullscreen
 				on_commit_filter={commit_filter}
 				current_search_query={$df_state.current_search_query}
 			/>

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

@@ -35,11 +35,13 @@ declare const __propDef: {
         show_search?: ("none" | "search" | "filter") | undefined;
         pinned_columns?: number | undefined;
         static_columns?: (string | number)[] | undefined;
+        fullscreen?: boolean | undefined;
         display_value?: (string[][] | null) | undefined;
         styling?: (string[][] | null) | undefined;
         reset_sort_state?: (() => void) | undefined;
     };
     events: {
+        fullscreen: CustomEvent<boolean>;
         change: CustomEvent<DataframeValue>;
         input: CustomEvent<undefined>;
         select: CustomEvent<SelectData>;

package/dist/shared/Toolbar.svelte

@@ -1,10 +1,11 @@
-<script>import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+<script>import { Copy, Check } from "@gradio/icons";
+import { FullscreenButton } from "@gradio/atoms";
 import { onDestroy } from "svelte";
 import { createEventDispatcher } from "svelte";
 export let show_fullscreen_button = false;
 export let show_copy_button = false;
 export let show_search = "none";
-export let is_fullscreen = false;
+export let fullscreen = false;
 export let on_copy;
 export let on_commit_filter;
 const dispatch = createEventDispatcher();
@@ -79,18 +80,7 @@ onDestroy(() => {
 			</button>
 		{/if}
 		{#if show_fullscreen_button}
-			<button
-				class="toolbar-button"
-				on:click
-				aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-				title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-			>
-				{#if is_fullscreen}
-					<Minimize />
-				{:else}
-					<Maximize />
-				{/if}
-			</button>
+			<FullscreenButton {fullscreen} on:fullscreen />
 		{/if}
 	</div>
 </div>

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

@@ -4,13 +4,13 @@ declare const __propDef: {
         show_fullscreen_button?: boolean | undefined;
         show_copy_button?: boolean | undefined;
         show_search?: ("none" | "search" | "filter") | undefined;
-        is_fullscreen?: boolean | undefined;
+        fullscreen?: boolean | undefined;
         on_copy: () => Promise<void>;
         on_commit_filter: () => void;
         current_search_query?: (string | null) | undefined;
     };
     events: {
-        click: MouseEvent;
+        fullscreen: CustomEvent<boolean>;
         search: CustomEvent<string | null>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -25,6 +25,14 @@ interface DataFrameState {
             direction: SortDirection;
         }[];
         row_order: number[];
+        initial_data: {
+            data: {
+                id: string;
+                value: string | number;
+            }[][];
+            display_value: string[][] | null;
+            styling: string[][] | null;
+        } | null;
     };
     ui_state: {
         active_cell_menu: {
@@ -134,6 +142,8 @@ export interface DataFrameContext {
         id: string;
         value: string;
     }[];
+    display_value?: string[][] | null;
+    styling?: string[][] | null;
     els?: Record<string, {
         cell: HTMLTableCellElement | null;
         input: HTMLInputElement | null;

package/dist/shared/context/dataframe_context.js

@@ -37,8 +37,24 @@ function create_actions(state, context) {
             if (!s.sort_state.sort_columns.some((c) => c.col === col && c.direction === direction)) {
                 sort_cols.push({ col, direction });
             }
+            const initial_data = s.sort_state.initial_data ||
+                (context.data && sort_cols.length > 0
+                    ? {
+                        data: JSON.parse(JSON.stringify(context.data)),
+                        display_value: context.display_value
+                            ? JSON.parse(JSON.stringify(context.display_value))
+                            : null,
+                        styling: context.styling
+                            ? JSON.parse(JSON.stringify(context.styling))
+                            : null
+                    }
+                    : null);
             return {
-                sort_state: { ...s.sort_state, sort_columns: sort_cols.slice(-3) }
+                sort_state: {
+                    ...s.sort_state,
+                    sort_columns: sort_cols.slice(-3),
+                    initial_data: initial_data
+                }
             };
         }),
         get_sort_status: (name, headers) => {
@@ -111,7 +127,7 @@ function create_actions(state, context) {
                 !dequal(current_headers, previous_headers)) {
                 if (!dequal(current_headers, previous_headers)) {
                     update_state((s) => ({
-                        sort_state: { sort_columns: [], row_order: [] }
+                        sort_state: { sort_columns: [], row_order: [], initial_data: null }
                     }));
                 }
                 dispatch("change", {
@@ -123,9 +139,22 @@ function create_actions(state, context) {
                     dispatch("input");
             }
         },
-        reset_sort_state: () => update_state((s) => ({
-            sort_state: { sort_columns: [], row_order: [] }
-        })),
+        reset_sort_state: () => update_state((s) => {
+            if (s.sort_state.initial_data && context.data) {
+                const original = s.sort_state.initial_data;
+                const update_array = (source, target) => {
+                    if (source && target) {
+                        target.splice(0, target.length, ...JSON.parse(JSON.stringify(source)));
+                    }
+                };
+                update_array(original.data, context.data);
+                update_array(original.display_value, context.display_value);
+                update_array(original.styling, context.styling);
+            }
+            return {
+                sort_state: { sort_columns: [], row_order: [], initial_data: null }
+            };
+        }),
         set_active_cell_menu: (menu) => update_state((s) => ({
             ui_state: { ...s.ui_state, active_cell_menu: menu }
         })),
@@ -311,7 +340,7 @@ export function create_dataframe_context(config) {
     const state = writable({
         config,
         current_search_query: null,
-        sort_state: { sort_columns: [], row_order: [] },
+        sort_state: { sort_columns: [], row_order: [], initial_data: null },
         ui_state: {
             active_cell_menu: null,
             active_header_menu: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.11",
+  "version": "0.17.12",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,13 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.16.0",
-    "@gradio/button": "^0.4.18",
-    "@gradio/icons": "^0.12.0",
-    "@gradio/client": "^1.14.2",
+    "@gradio/atoms": "^0.16.1",
     "@gradio/markdown-code": "^0.4.3",
-    "@gradio/upload": "^0.16.4",
-    "@gradio/statustracker": "^0.10.10",
+    "@gradio/icons": "^0.12.0",
+    "@gradio/button": "^0.5.0",
+    "@gradio/statustracker": "^0.10.11",
+    "@gradio/client": "^1.15.0",
+    "@gradio/upload": "^0.16.5",
     "@gradio/utils": "^0.10.2"
   },
   "exports": {

package/shared/Table.svelte

@@ -76,6 +76,7 @@
 	export let show_search: "none" | "search" | "filter" = "none";
 	export let pinned_columns = 0;
 	export let static_columns: (string | number)[] = [];
+	export let fullscreen = false;
 
 	const df_ctx = create_dataframe_context({
 		show_fullscreen_button,
@@ -127,23 +128,22 @@
 		observer.observe(parent);
 		document.addEventListener("click", handle_click_outside);
 		window.addEventListener("resize", handle_resize);
-		document.addEventListener("fullscreenchange", handle_fullscreen_change);
 
 		return () => {
 			observer.disconnect();
 			document.removeEventListener("click", handle_click_outside);
 			window.removeEventListener("resize", handle_resize);
-			document.removeEventListener(
-				"fullscreenchange",
-				handle_fullscreen_change
-			);
 		};
 	});
 
-	$: if (data || _headers || els) {
-		df_ctx.data = data;
-		df_ctx.headers = _headers;
-		df_ctx.els = els;
+	$: {
+		if (data || _headers || els) {
+			df_ctx.data = data;
+			df_ctx.headers = _headers;
+			df_ctx.els = els;
+			df_ctx.display_value = display_value;
+			df_ctx.styling = styling;
+		}
 	}
 
 	const dispatch = createEventDispatcher<{
@@ -169,7 +169,6 @@
 		display_value?: string;
 		styling?: string;
 	}[][] = [[]];
-	let is_fullscreen = false;
 	let dragging = false;
 	let color_accent_copied: string;
 	let filtered_to_original_map: number[] = [];
@@ -248,6 +247,9 @@
 			df_actions.reset_sort_state();
 		} else if ($df_state.sort_state.sort_columns.length > 0) {
 			sort_data(data, display_value, styling);
+		} else {
+			df_actions.handle_sort(-1, "asc");
+			df_actions.reset_sort_state();
 		}
 
 		if ($df_state.current_search_query) {
@@ -329,7 +331,6 @@
 
 	function clear_sort(): void {
 		df_actions.reset_sort_state();
-		sort_data(data, display_value, styling);
 	}
 
 	$: if ($df_state.sort_state.sort_columns.length > 0) {
@@ -525,20 +526,6 @@
 		handle_cell_blur(blur_event, df_ctx, coords);
 	}
 
-	function toggle_fullscreen(): void {
-		if (!document.fullscreenElement) {
-			parent.requestFullscreen();
-			is_fullscreen = true;
-		} else {
-			document.exitFullscreen();
-			is_fullscreen = false;
-		}
-	}
-
-	function handle_fullscreen_change(): void {
-		is_fullscreen = !!document.fullscreenElement;
-	}
-
 	function toggle_header_menu(event: MouseEvent, col: number): void {
 		event.stopPropagation();
 		if (active_header_menu && active_header_menu.col === col) {
@@ -750,12 +737,12 @@
 			{/if}
 			<Toolbar
 				{show_fullscreen_button}
-				{is_fullscreen}
-				on:click={toggle_fullscreen}
+				{fullscreen}
 				on_copy={async () => await copy_table_data(data, null)}
 				{show_copy_button}
 				{show_search}
 				on:search={(e) => df_actions.handle_search(e.detail)}
+				on:fullscreen
 				on_commit_filter={commit_filter}
 				current_search_query={$df_state.current_search_query}
 			/>

package/shared/Toolbar.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+	import { Copy, Check } from "@gradio/icons";
+	import { FullscreenButton } from "@gradio/atoms";
 	import { onDestroy } from "svelte";
 	import { createEventDispatcher } from "svelte";
 
 	export let show_fullscreen_button = false;
 	export let show_copy_button = false;
 	export let show_search: "none" | "search" | "filter" = "none";
-	export let is_fullscreen = false;
+	export let fullscreen = false;
 	export let on_copy: () => Promise<void>;
 	export let on_commit_filter: () => void;
 
@@ -87,18 +88,7 @@
 			</button>
 		{/if}
 		{#if show_fullscreen_button}
-			<button
-				class="toolbar-button"
-				on:click
-				aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-				title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-			>
-				{#if is_fullscreen}
-					<Minimize />
-				{:else}
-					<Maximize />
-				{/if}
-			</button>
+			<FullscreenButton {fullscreen} on:fullscreen />
 		{/if}
 	</div>
 </div>

package/shared/context/dataframe_context.ts

@@ -34,6 +34,11 @@ interface DataFrameState {
 	sort_state: {
 		sort_columns: { col: number; direction: SortDirection }[];
 		row_order: number[];
+		initial_data: {
+			data: { id: string; value: string | number }[][];
+			display_value: string[][] | null;
+			styling: string[][] | null;
+		} | null;
 	};
 	ui_state: {
 		active_cell_menu: { row: number; col: number; x: number; y: number } | null;
@@ -149,6 +154,8 @@ export interface DataFrameContext {
 	actions: DataFrameActions;
 	data?: any[][];
 	headers?: { id: string; value: string }[];
+	display_value?: string[][] | null;
+	styling?: string[][] | null;
 	els?: Record<
 		string,
 		{ cell: HTMLTableCellElement | null; input: HTMLInputElement | null }
@@ -217,8 +224,27 @@ function create_actions(
 				) {
 					sort_cols.push({ col, direction });
 				}
+
+				const initial_data =
+					s.sort_state.initial_data ||
+					(context.data && sort_cols.length > 0
+						? {
+								data: JSON.parse(JSON.stringify(context.data)),
+								display_value: context.display_value
+									? JSON.parse(JSON.stringify(context.display_value))
+									: null,
+								styling: context.styling
+									? JSON.parse(JSON.stringify(context.styling))
+									: null
+							}
+						: null);
+
 				return {
-					sort_state: { ...s.sort_state, sort_columns: sort_cols.slice(-3) }
+					sort_state: {
+						...s.sort_state,
+						sort_columns: sort_cols.slice(-3),
+						initial_data: initial_data
+					}
 				};
 			}),
 		get_sort_status: (name, headers) => {
@@ -319,7 +345,7 @@ function create_actions(
 			) {
 				if (!dequal(current_headers, previous_headers)) {
 					update_state((s) => ({
-						sort_state: { sort_columns: [], row_order: [] }
+						sort_state: { sort_columns: [], row_order: [], initial_data: null }
 					}));
 				}
 				dispatch("change", {
@@ -331,9 +357,35 @@ function create_actions(
 			}
 		},
 		reset_sort_state: () =>
-			update_state((s) => ({
-				sort_state: { sort_columns: [], row_order: [] }
-			})),
+			update_state((s) => {
+				if (s.sort_state.initial_data && context.data) {
+					const original = s.sort_state.initial_data;
+
+					const update_array = (
+						source:
+							| { id: string; value: string | number }[][]
+							| string[][]
+							| null,
+						target: any[] | null | undefined
+					): void => {
+						if (source && target) {
+							target.splice(
+								0,
+								target.length,
+								...JSON.parse(JSON.stringify(source))
+							);
+						}
+					};
+
+					update_array(original.data, context.data);
+					update_array(original.display_value, context.display_value);
+					update_array(original.styling, context.styling);
+				}
+
+				return {
+					sort_state: { sort_columns: [], row_order: [], initial_data: null }
+				};
+			}),
 		set_active_cell_menu: (menu) =>
 			update_state((s) => ({
 				ui_state: { ...s.ui_state, active_cell_menu: menu }
@@ -546,7 +598,7 @@ export function create_dataframe_context(
 	const state = writable<DataFrameState>({
 		config,
 		current_search_query: null,
-		sort_state: { sort_columns: [], row_order: [] },
+		sort_state: { sort_columns: [], row_order: [], initial_data: null },
 		ui_state: {
 			active_cell_menu: null,
 			active_header_menu: null,