@gradio/dataframe 0.9.2 → 0.10.1-beta.1

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

@@ -0,0 +1,49 @@
+import { SvelteComponent } from "svelte";
+import type { SelectData } from "@gradio/utils";
+import type { I18nFormatter } from "js/core/src/gradio_helper";
+import { type Client } from "@gradio/client";
+import type { Headers, Metadata, Datatype } from "./utils";
+declare const __propDef: {
+    props: {
+        datatype: Datatype | Datatype[];
+        label?: (string | null) | undefined;
+        show_label?: boolean | undefined;
+        headers?: Headers | undefined;
+        values?: (string | number)[][] | undefined;
+        col_count: [number, "fixed" | "dynamic"];
+        row_count: [number, "fixed" | "dynamic"];
+        latex_delimiters: {
+            left: string;
+            right: string;
+            display: boolean;
+        }[];
+        editable?: boolean | undefined;
+        wrap?: boolean | undefined;
+        root: string;
+        i18n: I18nFormatter;
+        height?: number | undefined;
+        line_breaks?: boolean | undefined;
+        column_widths?: string[] | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        display_value?: (string[][] | null) | undefined;
+        styling?: (string[][] | null) | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            data: (string | number)[][];
+            headers: string[];
+            metadata: Metadata;
+        }>;
+        select: CustomEvent<SelectData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/shared/VirtualTable.svelte

@@ -0,0 +1,294 @@
+<script>import { onMount, tick } from "svelte";
+import { _ } from "svelte-i18n";
+export let items = [];
+export let max_height;
+export let actual_height;
+export let table_scrollbar_width;
+export let start = 0;
+export let end = 20;
+export let selected;
+let height = "100%";
+let average_height = 30;
+let bottom = 0;
+let contents;
+let head_height = 0;
+let foot_height = 0;
+let height_map = [];
+let mounted;
+let rows;
+let top = 0;
+let viewport;
+let viewport_height = 200;
+let visible = [];
+let viewport_box;
+$:
+  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;
+  }
+  const { scrollTop } = viewport;
+  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;
+    }
+    const row_height = height_map[i] = _h;
+    content_height += row_height;
+    i += 1;
+  }
+  end = i;
+  const remaining = _items.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;
+  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 {
+    actual_height = max_height;
+  }
+  await tick();
+}
+$:
+  scroll_and_render(selected);
+async function scroll_and_render(n) {
+  raf(async () => {
+    if (typeof n !== "number")
+      return;
+    const direction = typeof n !== "number" ? false : is_in_view(n);
+    if (direction === true) {
+      return;
+    }
+    if (direction === "back") {
+      await scroll_to_index(n, { behavior: "instant" });
+    }
+    if (direction === "forwards") {
+      await scroll_to_index(n, { behavior: "instant" }, true);
+    }
+  });
+}
+function is_in_view(n) {
+  const current = rows && rows[n - start];
+  if (!current && n < start) {
+    return "back";
+  }
+  if (!current && n >= end - 1) {
+    return "forwards";
+  }
+  const { top: viewport_top } = viewport.getBoundingClientRect();
+  const { top: top2, bottom: bottom2 } = current.getBoundingClientRect();
+  if (top2 - viewport_top < 37) {
+    return "back";
+  }
+  if (bottom2 - viewport_top > viewport_height) {
+    return "forwards";
+  }
+  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;
+  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;
+  let distance = index * _itemHeight;
+  if (align_end) {
+    distance = distance - viewport_height + _itemHeight + head_height;
+  }
+  const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
+  if (scrollbar_height > 0) {
+    distance += scrollbar_height;
+  }
+  const _opts = {
+    top: distance,
+    behavior: "smooth",
+    ...opts
+  };
+  viewport.scrollTo(_opts);
+}
+$:
+  sortedItems = items;
+$:
+  visible = is_browser ? sortedItems.slice(start, end).map((data, i) => {
+    return { index: i + start, data };
+  }) : sortedItems.slice(0, max_height / sortedItems.length * average_height + 1).map((data, i) => {
+    return { index: i + start, data };
+  });
+$:
+  actual_height = visible.length * average_height + 10;
+onMount(() => {
+  rows = contents.children;
+  mounted = true;
+  refresh_height_map(items);
+});
+</script>
+
+<svelte-virtual-table-viewport>
+	<table
+		class="table"
+		bind:this={viewport}
+		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"
+	>
+		<thead class="thead" bind:offsetHeight={head_height}>
+			<slot name="thead" />
+		</thead>
+		<tbody bind:this={contents} class="tbody">
+			{#if visible.length && visible[0].data.length}
+				{#each visible as item (item.data[0].id)}
+					<slot name="tbody" item={item.data} index={item.index}>
+						Missing Table Row
+					</slot>
+				{/each}
+			{/if}
+		</tbody>
+		<tfoot class="tfoot" bind:offsetHeight={foot_height}>
+			<slot name="tfoot" />
+		</tfoot>
+	</table>
+</svelte-virtual-table-viewport>
+
+<style>
+	table {
+		position: relative;
+		overflow-y: scroll;
+		overflow-x: scroll;
+		-webkit-overflow-scrolling: touch;
+		max-height: 100vh;
+		box-sizing: border-box;
+		display: block;
+		padding: 0;
+		margin: 0;
+		color: var(--body-text-color);
+		font-size: var(--input-text-size);
+		line-height: var(--line-md);
+		font-family: var(--font-mono);
+		border-spacing: 0;
+		width: 100%;
+		scroll-snap-type: x proximity;
+		border-collapse: separate;
+	}
+	table :is(thead, tfoot, tbody) {
+		display: table;
+		table-layout: fixed;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	tbody {
+		overflow-x: scroll;
+		overflow-y: hidden;
+	}
+
+	table tbody {
+		padding-top: var(--bw-svt-p-top);
+		padding-bottom: var(--bw-svt-p-bottom);
+	}
+	tbody {
+		position: relative;
+		box-sizing: border-box;
+		border: 0px solid currentColor;
+	}
+
+	tbody > :global(tr:last-child) {
+		border: none;
+	}
+
+	table :global(td) {
+		scroll-snap-align: start;
+	}
+
+	tbody > :global(tr:nth-child(even)) {
+		background: var(--table-even-background-fill);
+	}
+
+	thead {
+		position: sticky;
+		top: 0;
+		left: 0;
+		z-index: var(--layer-1);
+		box-shadow: var(--shadow-drop);
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        items?: any[][] | undefined;
+        max_height: number;
+        actual_height: number;
+        table_scrollbar_width: number;
+        start?: number | undefined;
+        end?: number | undefined;
+        selected: number | false;
+        scroll_to_index?: ((index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        thead: {};
+        tbody: {
+            item: any[];
+            index: number;
+        };
+        tfoot: {};
+    };
+};
+export type VirtualTableProps = typeof __propDef.props;
+export type VirtualTableEvents = typeof __propDef.events;
+export type VirtualTableSlots = typeof __propDef.slots;
+export default class VirtualTable extends SvelteComponent<VirtualTableProps, VirtualTableEvents, VirtualTableSlots> {
+    get scroll_to_index(): (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
+}
+export {};

package/dist/shared/utils.d.ts

@@ -0,0 +1,10 @@
+export type Headers = string[];
+export type Data = (string | number)[][];
+export type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
+export type Metadata = {
+    [key: string]: string[][] | null;
+} | null;
+export type HeadersWithIDs = {
+    value: string;
+    id: string;
+}[];

package/dist/shared/utils.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.9.2",
+  "version": "0.10.1-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,20 +17,36 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/button": "^0.2.49",
-    "@gradio/atoms": "^0.7.9",
-    "@gradio/client": "^1.5.0",
-    "@gradio/statustracker": "^0.7.4",
-    "@gradio/markdown": "^0.9.2",
-    "@gradio/upload": "^0.12.2",
-    "@gradio/utils": "^0.5.2"
+    "@gradio/atoms": "^0.8.1-beta.1",
+    "@gradio/client": "^1.6.0-beta.1",
+    "@gradio/markdown": "^0.9.4-beta.1",
+    "@gradio/statustracker": "^0.8.0-beta.1",
+    "@gradio/upload": "^0.12.4-beta.1",
+    "@gradio/button": "^0.3.0-beta.1",
+    "@gradio/utils": "^0.7.0-beta.1"
   },
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
   "devDependencies": {
-    "@gradio/preview": "^0.10.2"
+    "@gradio/preview": "^0.11.1-beta.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/dataframe"
   }
 }

package/shared/EditableCell.svelte

@@ -23,6 +23,7 @@
 	export let select_on_focus = false;
 	export let line_breaks = true;
 	export let editable = true;
+	export let root: string;
 
 	const dispatch = createEventDispatcher();
 
@@ -81,6 +82,7 @@
 			{latex_delimiters}
 			{line_breaks}
 			chatbot={false}
+			{root}
 		/>
 	{:else}
 		{editable ? value : display_value || value}

package/shared/Table.svelte

@@ -7,7 +7,7 @@
 	import { BaseButton } from "@gradio/button";
 	import EditableCell from "./EditableCell.svelte";
 	import type { SelectData } from "@gradio/utils";
-	import type { I18nFormatter } from "js/app/src/gradio_helper";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
 	import type {
@@ -65,7 +65,11 @@
 		if (selected !== false) {
 			const [row, col] = selected;
 			if (!isNaN(row) && !isNaN(col)) {
-				dispatch("select", { index: [row, col], value: get_data_at(row, col) });
+				dispatch("select", {
+					index: [row, col],
+					value: get_data_at(row, col),
+					row_value: data[row].map((d) => d.value)
+				});
 			}
 		}
 	}
@@ -559,7 +563,8 @@
 		}
 	}
 
-	let table_height: number = height;
+	let table_height: number =
+		values.slice(0, (height / values.length) * 37).length * 37 + 37;
 	let scrollbar_width = 0;
 
 	function sort_data(
@@ -683,6 +688,7 @@
 									header
 									edit={false}
 									el={null}
+									{root}
 								/>
 
 								<div
@@ -717,6 +723,7 @@
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 									edit={false}
 									el={null}
+									{root}
 								/>
 							</div>
 						</td>
@@ -763,6 +770,7 @@
 									on:dblclick={() => edit_header(i)}
 									{select_on_focus}
 									header
+									{root}
 								/>
 
 								<!-- TODO: fix -->
@@ -812,6 +820,7 @@
 									datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 									on:blur={() => ((clear_on_focus = false), parent.focus())}
 									{clear_on_focus}
+									{root}
 								/>
 							</div>
 						</td>

package/shared/VirtualTable.svelte

@@ -8,11 +8,11 @@
 	export let actual_height: number;
 	export let table_scrollbar_width: number;
 	export let start = 0;
-	export let end = 0;
+	export let end = 20;
 	export let selected: number | false;
 	let height = "100%";
 
-	let average_height: number;
+	let average_height = 30;
 	let bottom = 0;
 	let contents: HTMLTableSectionElement;
 	let head_height = 0;
@@ -22,19 +22,25 @@
 	let rows: HTMLCollectionOf<HTMLTableRowElement>;
 	let top = 0;
 	let viewport: HTMLTableElement;
-	let viewport_height = 0;
+	let viewport_height = 200;
 	let visible: { index: number; data: any[] }[] = [];
 	let viewport_box: DOMRectReadOnly;
 
-	$: viewport_height = viewport_box?.height || 0;
+	$: viewport_height = viewport_box?.height || 200;
 
-	$: if (mounted) requestAnimationFrame(() => refresh_height_map(sortedItems));
+	const is_browser = typeof window !== "undefined";
+	const raf = is_browser
+		? 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;
 		}
+
 		const { scrollTop } = viewport;
 		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
 
@@ -87,7 +93,7 @@
 	$: scroll_and_render(selected);
 
 	async function scroll_and_render(n: number | false): Promise<void> {
-		requestAnimationFrame(async () => {
+		raf(async () => {
 			if (typeof n !== "number") return;
 			const direction = typeof n !== "number" ? false : is_in_view(n);
 			if (direction === true) {
@@ -232,10 +238,17 @@
 
 	$: sortedItems = items;
 
-	$: visible = sortedItems.slice(start, end).map((data, i) => {
-		return { index: i + start, data };
-	});
-
+	$: visible = is_browser
+		? sortedItems.slice(start, end).map((data, i) => {
+				return { index: i + start, data };
+			})
+		: sortedItems
+				.slice(0, (max_height / sortedItems.length) * average_height + 1)
+				.map((data, i) => {
+					return { index: i + start, data };
+				});
+
+	$: actual_height = visible.length * average_height + 10;
 	onMount(() => {
 		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
 		mounted = true;