@gradio/dataframe 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @gradio/dataframe
 
+## 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)!
+
+### 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)!
+
 ## 0.5.1
 
 ### Patch Changes
@@ -326,4 +343,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/Dataframe.stories.svelte

@@ -39,6 +39,44 @@
 	}}
 />
 
+<Story
+	name="Interactive dataframe with label"
+	args={{
+		value: {
+			data: [
+				["Cat", 5],
+				["Horse", 3],
+				["Snake", 1]
+			],
+			headers: ["Animal", "Votes"],
+			metadata: null
+		},
+		label: "Animals",
+		show_label: true,
+		col_count: [2, "dynamic"],
+		row_count: [3, "dynamic"]
+	}}
+/>
+
+<Story
+	name="Interactive dataframe no label"
+	args={{
+		value: {
+			data: [
+				["Cat", 5],
+				["Horse", 3],
+				["Snake", 1]
+			],
+			headers: ["Animal", "Votes"],
+			metadata: null
+		},
+		label: "Animals",
+		show_label: false,
+		col_count: [2, "dynamic"],
+		row_count: [3, "dynamic"]
+	}}
+/>
+
 <Story
 	name="Static dataframe"
 	args={{

package/Index.svelte

@@ -25,6 +25,7 @@
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
 	export let label: string | null = null;
+	export let show_label = true;
 	export let wrap: boolean;
 	export let datatype: Datatype | Datatype[];
 	export let scale: number | null = null;
@@ -95,6 +96,7 @@
 	<Table
 		{root}
 		{label}
+		{show_label}
 		{row_count}
 		{col_count}
 		{value}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,13 +16,13 @@
     "dequal": "^2.0.2",
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
-    "marked": "^11.0.0",
-    "@gradio/atoms": "^0.5.0",
-    "@gradio/markdown": "^0.6.1",
-    "@gradio/button": "^0.2.18",
-    "@gradio/upload": "^0.7.0",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/utils": "^0.2.1"
+    "marked": "^12.0.0",
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/button": "^0.2.20",
+    "@gradio/markdown": "^0.6.2",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/upload": "^0.7.2",
+    "@gradio/statustracker": "^0.4.5"
   },
   "exports": {
     ".": "./Index.svelte",

package/shared/EditableCell.svelte

@@ -105,6 +105,10 @@
 		flex: 1 1 0%;
 		outline: none;
 		padding: var(--size-2);
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		user-select: text;
 	}
 
 	.header {

package/shared/Table.svelte

@@ -19,6 +19,7 @@
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
+	export let show_label = true;
 	export let headers: Headers = [];
 	let values: (string | number)[][];
 	export let value: { data: Data; headers: Headers; metadata: Metadata } | null;
@@ -42,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) {
@@ -522,8 +524,6 @@
 
 	let dragging = false;
 
-	let t_width = 0;
-
 	function get_max(
 		_d: { value: any; id: string }[][]
 	): { value: any; id: string }[] {
@@ -616,6 +616,7 @@
 	$: selected_index = !!selected && selected[0];
 
 	let is_visible = false;
+
 	onMount(() => {
 		const observer = new IntersectionObserver((entries, observer) => {
 			entries.forEach((entry) => {
@@ -643,7 +644,7 @@
 />
 
 <div class:label={label && label.length !== 0} use:copy>
-	{#if label && label.length !== 0}
+	{#if label && label.length !== 0 && show_label}
 		<p>
 			{label}
 		</p>
@@ -659,7 +660,7 @@
 		tabindex="0"
 	>
 		<table
-			bind:clientWidth={t_width}
+			bind:contentRect={t_rect}
 			bind:this={table}
 			class:fixed-layout={column_widths.length != 0}
 		>
@@ -734,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"
 	>