@gradio/dataframe 0.17.15 → 0.17.16

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/dataframe
 
+## 0.17.16
+
+### Fixes
+
+- [#11349](https://github.com/gradio-app/gradio/pull/11349) [`bed858b`](https://github.com/gradio-app/gradio/commit/bed858b62b9887e606618bea5fe8a2f212b4a645) - Fix DataFrame Scroll Divergence.  Thanks @deckar01!
+- [#11346](https://github.com/gradio-app/gradio/pull/11346) [`3a9a002`](https://github.com/gradio-app/gradio/commit/3a9a0025efd49942303517c5dbd426d41241b7f6) - Hide native Dataframe to screen readers.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/markdown-code@0.4.3
+- @gradio/statustracker@0.10.12
+- @gradio/button@0.5.3
+- @gradio/checkbox@0.4.23
+
 ## 0.17.15
 
 ### Features

package/dist/shared/Table.svelte

@@ -634,7 +634,7 @@ function get_cell_display_value(row, col) {
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:this={table}>
+		<table bind:this={table} aria-hidden="true">
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}

package/dist/shared/VirtualTable.svelte

@@ -28,53 +28,64 @@ $:
   viewport_height = viewport_box?.height || 200;
 const is_browser = typeof window !== "undefined";
 const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
-$:
-  mounted && raf(() => refresh_height_map(sortedItems));
-let content_height = 0;
-async function refresh_height_map(_items) {
-  if (viewport_height === 0) {
-    return;
+$: {
+  if (mounted && viewport_height && viewport.offsetParent) {
+    sortedItems, raf(refresh_height_map);
   }
-  head_height = viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
-  await tick();
-  const { scrollTop } = viewport;
+}
+async function refresh_height_map() {
+  if (sortedItems.length < start) {
+    await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
+  }
+  const scrollTop = Math.max(0, viewport.scrollTop);
+  show_scroll_button = scrollTop > 100;
   table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
-  content_height = top - (scrollTop - head_height);
-  let i = start;
-  while (content_height < max_height && i < _items.length) {
-    let row = rows[i - start];
-    if (!row) {
-      end = i + 1;
-      await tick();
-      row = rows[i - start];
-    }
-    let _h = row?.getBoundingClientRect().height;
-    if (!_h) {
-      _h = average_height;
+  for (let v = 0; v < rows.length; v += 1) {
+    height_map[start + v] = rows[v].getBoundingClientRect().height;
+  }
+  let i = 0;
+  let y = head_height;
+  while (i < sortedItems.length) {
+    const row_height = height_map[i] || average_height;
+    if (y + row_height > scrollTop - max_height) {
+      start = i;
+      top = y - head_height;
+      break;
     }
-    const row_height = height_map[i] = _h;
+    y += row_height;
+    i += 1;
+  }
+  let content_height = head_height;
+  while (i < sortedItems.length) {
+    const row_height = height_map[i] || average_height;
     content_height += row_height;
     i += 1;
+    if (content_height - head_height > 3 * max_height) {
+      break;
+    }
   }
   end = i;
-  const remaining = _items.length - end;
+  const remaining = sortedItems.length - end;
   const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
   if (scrollbar_height > 0) {
     content_height += scrollbar_height;
   }
   let filtered_height_map = height_map.filter((v) => typeof v === "number");
-  average_height = filtered_height_map.reduce((a, b) => a + b, 0) / filtered_height_map.length;
+  average_height = filtered_height_map.reduce((a, b) => a + b, 0) / filtered_height_map.length || 30;
   bottom = remaining * average_height;
-  height_map.length = _items.length;
-  await tick();
-  if (!max_height) {
-    actual_height = content_height + 1;
-  } else if (content_height < max_height) {
-    actual_height = content_height + 2;
-  } else {
+  if (!isFinite(bottom)) {
+    bottom = 2e5;
+  }
+  height_map.length = sortedItems.length;
+  while (i < sortedItems.length) {
+    i += 1;
+    height_map[i] = average_height;
+  }
+  if (max_height && content_height > max_height) {
     actual_height = max_height;
+  } else {
+    actual_height = content_height;
   }
-  await tick();
 }
 $:
   scroll_and_render(selected);
@@ -112,71 +123,6 @@ function is_in_view(n) {
   }
   return true;
 }
-function get_computed_px_amount(elem, property) {
-  if (!elem) {
-    return 0;
-  }
-  const compStyle = getComputedStyle(elem);
-  let x = parseInt(compStyle.getPropertyValue(property));
-  return x;
-}
-async function handle_scroll(e) {
-  const scroll_top = viewport.scrollTop;
-  show_scroll_button = scroll_top > 100;
-  if (show_scroll_button) {
-    dispatch("scroll_top", scroll_top);
-  }
-  rows = contents.children;
-  const is_start_overflow = sortedItems.length < start;
-  const row_top_border = get_computed_px_amount(rows[1], "border-top-width");
-  const actual_border_collapsed_width = 0;
-  if (is_start_overflow) {
-    await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
-  }
-  let new_start = 0;
-  for (let v = 0; v < rows.length; v += 1) {
-    height_map[start + v] = rows[v].getBoundingClientRect().height;
-  }
-  let i = 0;
-  let y = head_height + row_top_border / 2;
-  let row_heights = [];
-  while (i < sortedItems.length) {
-    const row_height = height_map[i] || average_height;
-    row_heights[i] = row_height;
-    if (y + row_height + actual_border_collapsed_width > scroll_top) {
-      new_start = i;
-      top = y - (head_height + row_top_border / 2);
-      break;
-    }
-    y += row_height;
-    i += 1;
-  }
-  new_start = Math.max(0, new_start);
-  while (i < sortedItems.length) {
-    const row_height = height_map[i] || average_height;
-    y += row_height;
-    i += 1;
-    if (y > scroll_top + viewport_height) {
-      break;
-    }
-  }
-  start = new_start;
-  end = i;
-  const remaining = sortedItems.length - end;
-  if (end === 0) {
-    end = 10;
-  }
-  average_height = (y - head_height) / end;
-  let remaining_height = remaining * average_height;
-  while (i < sortedItems.length) {
-    i += 1;
-    height_map[i] = average_height;
-  }
-  bottom = remaining_height;
-  if (!isFinite(bottom)) {
-    bottom = 2e5;
-  }
-}
 export async function scroll_to_index(index, opts, align_end = false) {
   await tick();
   const _itemHeight = average_height;
@@ -206,7 +152,6 @@ $:
 onMount(() => {
   rows = contents.children;
   mounted = true;
-  refresh_height_map(items);
 });
 </script>
 
@@ -217,7 +162,7 @@ onMount(() => {
 			class:disable-scroll={disable_scroll}
 			bind:this={viewport}
 			bind:contentRect={viewport_box}
-			on:scroll={handle_scroll}
+			on:scroll={refresh_height_map}
 			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; --max-height: {max_height}px"
 		>
 			<thead class="thead" bind:offsetHeight={head_height}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.15",
+  "version": "0.17.16",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,15 +17,15 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/button": "^0.5.3",
     "@gradio/atoms": "^0.16.1",
-    "@gradio/checkbox": "^0.4.23",
-    "@gradio/client": "^1.15.2",
+    "@gradio/button": "^0.5.3",
     "@gradio/icons": "^0.12.0",
     "@gradio/statustracker": "^0.10.12",
+    "@gradio/checkbox": "^0.4.23",
     "@gradio/upload": "^0.16.7",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/markdown-code": "^0.4.3"
+    "@gradio/markdown-code": "^0.4.3",
+    "@gradio/client": "^1.15.2",
+    "@gradio/utils": "^0.10.2"
   },
   "exports": {
     ".": {
@@ -44,7 +44,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.13.1"
+    "@gradio/preview": "^0.13.2"
   },
   "repository": {
     "type": "git",

package/shared/Table.svelte

@@ -780,7 +780,7 @@
 		role="grid"
 		tabindex="0"
 	>
-		<table bind:this={table}>
+		<table bind:this={table} aria-hidden="true">
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}

package/shared/VirtualTable.svelte

@@ -40,43 +40,53 @@
 		? window.requestAnimationFrame
 		: (cb: (...args: any[]) => void) => cb();
 
-	$: mounted && raf(() => refresh_height_map(sortedItems));
-
-	let content_height = 0;
-	async function refresh_height_map(_items: typeof items): Promise<void> {
-		if (viewport_height === 0) {
-			return;
+	$: {
+		if (mounted && viewport_height && viewport.offsetParent) {
+			sortedItems, raf(refresh_height_map);
 		}
+	}
 
-		// force header height calculation first
-		head_height =
-			viewport.querySelector(".thead")?.getBoundingClientRect().height || 0;
-		await tick();
+	async function refresh_height_map(): Promise<void> {
+		if (sortedItems.length < start) {
+			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
+		}
 
-		const { scrollTop } = viewport;
+		const scrollTop = Math.max(0, viewport.scrollTop);
+		show_scroll_button = scrollTop > 100;
 		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
-		content_height = top - (scrollTop - head_height);
-		let i = start;
-
-		while (content_height < max_height && i < _items.length) {
-			let row = rows[i - start];
-			if (!row) {
-				end = i + 1;
-				await tick(); // render the newly visible row
-				row = rows[i - start];
-			}
-			let _h = row?.getBoundingClientRect().height;
-			if (!_h) {
-				_h = average_height;
+		// acquire height map for currently visible rows
+		for (let v = 0; v < rows.length; v += 1) {
+			height_map[start + v] = rows[v].getBoundingClientRect().height;
+		}
+		let i = 0;
+		let y = head_height;
+		// loop items to find new start
+		while (i < sortedItems.length) {
+			const row_height = height_map[i] || average_height;
+			// keep a page of rows buffered above
+			if (y + row_height > scrollTop - max_height) {
+				start = i;
+				top = y - head_height;
+				break;
 			}
-			const row_height = (height_map[i] = _h);
+			y += row_height;
+			i += 1;
+		}
+
+		let content_height = head_height;
+		while (i < sortedItems.length) {
+			const row_height = height_map[i] || average_height;
 			content_height += row_height;
 			i += 1;
+			// keep a page of rows buffered below
+			if (content_height - head_height > 3 * max_height) {
+				break;
+			}
 		}
 
 		end = i;
-		const remaining = _items.length - end;
+		const remaining = sortedItems.length - end;
 
 		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
 		if (scrollbar_height > 0) {
@@ -86,20 +96,22 @@
 		let filtered_height_map = height_map.filter((v) => typeof v === "number");
 		average_height =
 			filtered_height_map.reduce((a, b) => a + b, 0) /
-			filtered_height_map.length;
+				filtered_height_map.length || 30;
 
 		bottom = remaining * average_height;
-		height_map.length = _items.length;
-		await tick();
-		if (!max_height) {
-			actual_height = content_height + 1;
-		} else if (content_height < max_height) {
-			actual_height = content_height + 2;
-		} else {
+		if (!isFinite(bottom)) {
+			bottom = 200000;
+		}
+		height_map.length = sortedItems.length;
+		while (i < sortedItems.length) {
+			i += 1;
+			height_map[i] = average_height;
+		}
+		if (max_height && content_height > max_height) {
 			actual_height = max_height;
+		} else {
+			actual_height = content_height;
 		}
-
-		await tick();
 	}
 
 	$: scroll_and_render(selected);
@@ -144,88 +156,6 @@
 		return true;
 	}
 
-	function get_computed_px_amount(elem: HTMLElement, property: string): number {
-		if (!elem) {
-			return 0;
-		}
-		const compStyle = getComputedStyle(elem);
-
-		let x = parseInt(compStyle.getPropertyValue(property));
-		return x;
-	}
-
-	async function handle_scroll(e: Event): Promise<void> {
-		const scroll_top = viewport.scrollTop;
-
-		show_scroll_button = scroll_top > 100;
-
-		if (show_scroll_button) {
-			dispatch("scroll_top", scroll_top);
-		}
-
-		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
-		const is_start_overflow = sortedItems.length < start;
-
-		const row_top_border = get_computed_px_amount(rows[1], "border-top-width");
-
-		const actual_border_collapsed_width = 0;
-
-		if (is_start_overflow) {
-			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
-		}
-
-		let new_start = 0;
-		// acquire height map for currently visible rows
-		for (let v = 0; v < rows.length; v += 1) {
-			height_map[start + v] = rows[v].getBoundingClientRect().height;
-		}
-		let i = 0;
-		// start from top: thead, with its borders, plus the first border to afterwards neglect
-		let y = head_height + row_top_border / 2;
-		let row_heights = [];
-		// loop items to find new start
-		while (i < sortedItems.length) {
-			const row_height = height_map[i] || average_height;
-			row_heights[i] = row_height;
-			// we only want to jump if the full (incl. border) row is away
-			if (y + row_height + actual_border_collapsed_width > scroll_top) {
-				// this is the last index still inside the viewport
-				new_start = i;
-				top = y - (head_height + row_top_border / 2);
-				break;
-			}
-			y += row_height;
-			i += 1;
-		}
-
-		new_start = Math.max(0, new_start);
-		while (i < sortedItems.length) {
-			const row_height = height_map[i] || average_height;
-			y += row_height;
-			i += 1;
-			if (y > scroll_top + viewport_height) {
-				break;
-			}
-		}
-		start = new_start;
-		end = i;
-		const remaining = sortedItems.length - end;
-		if (end === 0) {
-			end = 10;
-		}
-		average_height = (y - head_height) / end;
-		let remaining_height = remaining * average_height; // 0
-		// compute height map for remaining items
-		while (i < sortedItems.length) {
-			i += 1;
-			height_map[i] = average_height;
-		}
-		bottom = remaining_height;
-		if (!isFinite(bottom)) {
-			bottom = 200000;
-		}
-	}
-
 	export async function scroll_to_index(
 		index: number,
 		opts: ScrollToOptions,
@@ -269,7 +199,6 @@
 	onMount(() => {
 		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
 		mounted = true;
-		refresh_height_map(items);
 	});
 </script>
 
@@ -280,7 +209,7 @@
 			class:disable-scroll={disable_scroll}
 			bind:this={viewport}
 			bind:contentRect={viewport_box}
-			on:scroll={handle_scroll}
+			on:scroll={refresh_height_map}
 			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; --max-height: {max_height}px"
 		>
 			<thead class="thead" bind:offsetHeight={head_height}>