@gradio/dataframe 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,15 +1,33 @@
 # @gradio/dataframe
 
+## 0.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`17fb116`](https://github.com/gradio-app/gradio/commit/17fb116492f951ab66e3a39b5fdfb598f5446b6f), [`065c5b1`](https://github.com/gradio-app/gradio/commit/065c5b163c4badb9d9cbd06d627fb4ba086003e7)]:
+  - @gradio/markdown@0.6.3
+  - @gradio/utils@0.3.0
+  - @gradio/atoms@0.5.2
+  - @gradio/button@0.2.21
+  - @gradio/statustracker@0.4.6
+  - @gradio/upload@0.7.3
+
+## 0.6.1
+
+### Fixes
+
+- [#7354](https://github.com/gradio-app/gradio/pull/7354) [`a7fa47a`](https://github.com/gradio-app/gradio/commit/a7fa47a175fbcf0fd6573ca19334a3a55b55bb24) - ensure Dataframes in background tabs are visible when the tab is selected. Thanks [@pngwn](https://github.com/pngwn)!
+
 ## 0.6.0
 
 ### Features
 
-- [#7298](https://github.com/gradio-app/gradio/pull/7298) [`e5344ba`](https://github.com/gradio-app/gradio/commit/e5344ba0cd63d21dbb525330bbc07ca2eca57832) - chore(deps): update dependency marked to v12.  Thanks [@renovate](https://github.com/apps/renovate)!
-- [#7154](https://github.com/gradio-app/gradio/pull/7154) [`aab2a75`](https://github.com/gradio-app/gradio/commit/aab2a75f0610dd7ed0b481264c6b9f01cfe92094) - Allow selecting texts in dataframe cells.  Thanks [@shubhamofbce](https://github.com/shubhamofbce)!
+- [#7298](https://github.com/gradio-app/gradio/pull/7298) [`e5344ba`](https://github.com/gradio-app/gradio/commit/e5344ba0cd63d21dbb525330bbc07ca2eca57832) - chore(deps): update dependency marked to v12. Thanks [@renovate](https://github.com/apps/renovate)!
+- [#7154](https://github.com/gradio-app/gradio/pull/7154) [`aab2a75`](https://github.com/gradio-app/gradio/commit/aab2a75f0610dd7ed0b481264c6b9f01cfe92094) - Allow selecting texts in dataframe cells. Thanks [@shubhamofbce](https://github.com/shubhamofbce)!
 
 ### Fixes
 
-- [#7283](https://github.com/gradio-app/gradio/pull/7283) [`757dba6`](https://github.com/gradio-app/gradio/commit/757dba66baf624eae11ff076f0e8d6bfc2314630) - Add `show_label` check to `gr.Dataframe`.  Thanks [@hannahblair](https://github.com/hannahblair)!
+- [#7283](https://github.com/gradio-app/gradio/pull/7283) [`757dba6`](https://github.com/gradio-app/gradio/commit/757dba66baf624eae11ff076f0e8d6bfc2314630) - Add `show_label` check to `gr.Dataframe`. Thanks [@hannahblair](https://github.com/hannahblair)!
 
 ## 0.5.1
 
@@ -337,4 +355,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 - Updated dependencies [[`667875b2`](https://github.com/gradio-app/gradio/commit/667875b2441753e74d25bd9d3c8adedd8ede11cd), [`37caa2e0`](https://github.com/gradio-app/gradio/commit/37caa2e0fe95d6cab8beb174580fb557904f137f)]:
   - @gradio/upload@0.0.3
-  - @gradio/button@0.1.0
+  - @gradio/button@0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,12 +17,12 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.5.1",
-    "@gradio/button": "^0.2.19",
-    "@gradio/markdown": "^0.6.2",
-    "@gradio/statustracker": "^0.4.5",
-    "@gradio/upload": "^0.7.1",
-    "@gradio/utils": "^0.2.2"
+    "@gradio/atoms": "^0.5.2",
+    "@gradio/button": "^0.2.21",
+    "@gradio/upload": "^0.7.3",
+    "@gradio/statustracker": "^0.4.6",
+    "@gradio/markdown": "^0.6.3",
+    "@gradio/utils": "^0.3.0"
   },
   "exports": {
     ".": "./Index.svelte",

package/shared/Table.svelte

@@ -43,6 +43,7 @@
 	let selected: false | [number, number] = false;
 	let display_value: string[][] | null = value?.metadata?.display_value ?? null;
 	let styling: string[][] | null = value?.metadata?.styling ?? null;
+	let t_rect: DOMRectReadOnly;
 
 	$: {
 		if (value) {
@@ -523,8 +524,6 @@
 
 	let dragging = false;
 
-	let t_width = 0;
-
 	function get_max(
 		_d: { value: any; id: string }[][]
 	): { value: any; id: string }[] {
@@ -617,6 +616,7 @@
 	$: selected_index = !!selected && selected[0];
 
 	let is_visible = false;
+
 	onMount(() => {
 		const observer = new IntersectionObserver((entries, observer) => {
 			entries.forEach((entry) => {
@@ -660,7 +660,7 @@
 		tabindex="0"
 	>
 		<table
-			bind:clientWidth={t_width}
+			bind:contentRect={t_rect}
 			bind:this={table}
 			class:fixed-layout={column_widths.length != 0}
 		>
@@ -735,7 +735,6 @@
 		>
 			<VirtualTable
 				bind:items={data}
-				table_width={t_width}
 				max_height={height}
 				bind:actual_height={table_height}
 				bind:table_scrollbar_width={scrollbar_width}

package/shared/VirtualTable.svelte

@@ -4,7 +4,6 @@
 
 	export let items: any[][] = [];
 
-	export let table_width: number;
 	export let max_height: number;
 	export let actual_height: number;
 	export let table_scrollbar_width: number;
@@ -25,12 +24,15 @@
 	let viewport: HTMLTableElement;
 	let viewport_height = 0;
 	let visible: { index: number; data: any[] }[] = [];
+	let viewport_box: DOMRectReadOnly;
+
+	$: viewport_height = viewport_box?.height || 0;
 
 	$: if (mounted) requestAnimationFrame(() => refresh_height_map(sortedItems));
 
 	let content_height = 0;
 	async function refresh_height_map(_items: typeof items): Promise<void> {
-		if (viewport_height === 0 || table_width === 0) {
+		if (viewport_height === 0) {
 			return;
 		}
 		const { scrollTop } = viewport;
@@ -83,6 +85,7 @@
 	}
 
 	$: scroll_and_render(selected);
+
 	async function scroll_and_render(n: number | false): Promise<void> {
 		requestAnimationFrame(async () => {
 			if (typeof n !== "number") return;
@@ -244,7 +247,7 @@
 	<table
 		class="table"
 		bind:this={viewport}
-		bind:offsetHeight={viewport_height}
+		bind:contentRect={viewport_box}
 		on:scroll={handle_scroll}
 		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"
 	>