ensure Dataframes in background tabs are visible when the tab is sele…

…cted (#7354)

* add mutation observer to track visibility changes of tabs

* add changeset

* add changeset

* update console.log statements in Svelte component for debugging purposes

* remove unused table_width variable and update console logs in virtual table component

* move visibility check to table

* try dom rect bindings instead

* update binding of viewport_box to correctly calculate viewport height

* remove console.log statements and unused code

* add changeset

* add changeset

* remove unnecessary assignment of t_width in component

* update svelte-check to make ci pass

* update dependencies for happy-dom and vitest
merged from upstream

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/loose-pugs-like.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:ensure Dataframes in background tabs are visible when the tab is selected

demo/dataframe_tab/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_tab"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tab():\n", "        gr.HTML(\"<p>hi</p>\")\n", "    with gr.Tab():\n", "        gr.Dataframe(\n", "            value=[[i + 1] for i in range(10)],\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/dataframe_tab/run.py

@@ -0,0 +1,12 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Tab():
+        gr.HTML("<p>hi</p>")
+    with gr.Tab():
+        gr.Dataframe(
+            value=[[i + 1] for i in range(10)],
+        )
+
+if __name__ == "__main__":
+    demo.launch()

js/app/src/i18n.ts

@@ -1,6 +1,8 @@
 import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
 
-const langs = import.meta.globEager("./lang/*.json");
+const langs = import.meta.glob("./lang/*.json", {
+	eager: true
+});
 
 type LangsRecord = Record<
 	string,

js/app/vite.config.ts

@@ -37,7 +37,7 @@ import {
 
 const GRADIO_VERSION = version_raw || "asd_stub_asd";
 const CDN_BASE = "https://gradio.s3-us-west-2.amazonaws.com";
-const TEST_MODE = process.env.TEST_MODE || "jsdom";
+const TEST_MODE = process.env.TEST_MODE || "happy-dom";
 
 //@ts-ignore
 export default defineConfig(({ mode }) => {

js/dataframe/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}

js/dataframe/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"
 	>

package.json

@@ -57,6 +57,7 @@
 		"eslint": "^8.46.0",
 		"eslint-plugin-svelte": "^2.32.4",
 		"globals": "^13.20.0",
+		"happy-dom": "^13.3.8",
 		"jsdom": "^24.0.0",
 		"kleur": "^4.1.5",
 		"msw": "^2.0.0",
@@ -76,7 +77,7 @@
 		"sirv": "^2.0.2",
 		"sirv-cli": "^2.0.2",
 		"svelte": "^4.2.2",
-		"svelte-check": "^3.4.4",
+		"svelte-check": "^3.6.4",
 		"svelte-i18n": "^4.0.0",
 		"svelte-preprocess": "^5.0.4",
 		"tailwindcss": "^3.1.6",
@@ -85,7 +86,7 @@
 		"typescript-svelte-plugin": "^0.3.34",
 		"vite": "^4.3.9",
 		"vite-plugin-turbosnap": "1.0.3",
-		"vitest": "^0.34.6"
+		"vitest": "^1.2.2"
 	},
 	"devDependencies": {
 		"@storybook/addon-a11y": "^7.5.1",