@gradio/dataframe 0.17.17 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @gradio/dataframe
 
+## 0.18.1
+
+### Fixes
+
+- [#11436](https://github.com/gradio-app/gradio/pull/11436) [`f49b8da`](https://github.com/gradio-app/gradio/commit/f49b8da1c062dbd81acb8e7fdcdc9a09a272d02f) - Multi-Line DataFrame Editing.  Thanks @deckar01!
+
+### Dependency updates
+
+- @gradio/atoms@0.16.3
+- @gradio/statustracker@0.10.14
+- @gradio/upload@0.16.10
+- @gradio/client@1.15.5
+- @gradio/markdown-code@0.5.0
+- @gradio/button@0.5.6
+- @gradio/checkbox@0.4.25
+
+## 0.18.0
+
+### Features
+
+- [#11392](https://github.com/gradio-app/gradio/pull/11392) [`dc760a6`](https://github.com/gradio-app/gradio/commit/dc760a6dd7d3375f99913059803a826cdf0f7102) - Add column-specific filtering to `gr.Dataframe`.  Thanks @tiago-gsantos!
+
+### Fixes
+
+- [#11407](https://github.com/gradio-app/gradio/pull/11407) [`f3f9590`](https://github.com/gradio-app/gradio/commit/f3f9590d539b9e6fe3937a1bdc48006ee174fb8f) - Fix Styled DataFrame Sorting.  Thanks @deckar01!
+
+### Dependency updates
+
+- @gradio/upload@0.16.9
+- @gradio/client@1.15.4
+- @gradio/button@0.5.5
+
 ## 0.17.17
 
 ### Fixes

package/Dataframe.stories.svelte

@@ -111,12 +111,11 @@
 		const canvas = within(canvasElement);
 		const cells = canvas.getAllByRole("cell");
 		const initial_value = cells[0].textContent;
-
 		await userEvent.click(cells[0]);
 		await userEvent.keyboard("new value");
 
 		const final_value = cells[0].textContent;
-		if (initial_value !== final_value) {
+		if (initial_value?.trim() !== final_value?.trim()) {
 			throw new Error("Cell content changed when it should be non-editable");
 		}
 

package/Index.svelte

@@ -14,7 +14,6 @@
 	import type { Headers, Datatype, DataframeValue } from "./shared/utils";
 	import Image from "@gradio/image";
 
-	export let headers: Headers = [];
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -59,15 +58,6 @@
 	export let pinned_columns = 0;
 	export let static_columns: (string | number)[] = [];
 	export let fullscreen = false;
-
-	$: _headers = [...(value.headers || headers)];
-	$: display_value = value?.metadata?.display_value
-		? [...value?.metadata?.display_value]
-		: null;
-	$: styling =
-		!interactive && value?.metadata?.styling
-			? [...value?.metadata?.styling]
-			: null;
 </script>
 
 <Block
@@ -94,9 +84,9 @@
 		{row_count}
 		{col_count}
 		values={value.data}
-		{display_value}
-		{styling}
-		headers={_headers}
+		display_value={value.metadata?.display_value}
+		styling={value.metadata?.styling}
+		headers={value.headers}
 		{fullscreen}
 		on:change={(e) => {
 			value.data = e.detail.data;

package/dist/Index.svelte

@@ -8,7 +8,6 @@ export { default as BaseExample } from "./Example.svelte";
 import Table from "./shared/Table.svelte";
 import { StatusTracker } from "@gradio/statustracker";
 import Image from "@gradio/image";
-export let headers = [];
 export let elem_id = "";
 export let elem_classes = [];
 export let visible = true;
@@ -42,12 +41,6 @@ export let show_search = "none";
 export let pinned_columns = 0;
 export let static_columns = [];
 export let fullscreen = false;
-$:
-  _headers = [...value.headers || headers];
-$:
-  display_value = value?.metadata?.display_value ? [...value?.metadata?.display_value] : null;
-$:
-  styling = !interactive && value?.metadata?.styling ? [...value?.metadata?.styling] : null;
 </script>
 
 <Block
@@ -74,9 +67,9 @@ $:
 		{row_count}
 		{col_count}
 		values={value.data}
-		{display_value}
-		{styling}
-		headers={_headers}
+		display_value={value.metadata?.display_value}
+		styling={value.metadata?.styling}
+		headers={value.headers}
 		{fullscreen}
 		on:change={(e) => {
 			value.data = e.detail.data;

package/dist/Index.svelte.d.ts

@@ -3,10 +3,9 @@ export { default as BaseDataFrame } from "./shared/Table.svelte";
 export { default as BaseExample } from "./Example.svelte";
 import type { Gradio, SelectData } from "@gradio/utils";
 import type { LoadingStatus } from "@gradio/statustracker";
-import type { Headers, Datatype, DataframeValue } from "./shared/utils";
+import type { Datatype, DataframeValue } from "./shared/utils";
 declare const __propDef: {
     props: {
-        headers?: Headers | undefined;
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
         visible?: boolean | undefined;
@@ -56,9 +55,6 @@ export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
 export type IndexSlots = typeof __propDef.slots;
 export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-    get headers(): Headers | undefined;
-    /**accessor*/
-    set headers(_: Headers | undefined);
     get elem_id(): string | undefined;
     /**accessor*/
     set elem_id(_: string | undefined);

package/dist/shared/CellMenu.svelte

@@ -1,5 +1,6 @@
 <script>import { onMount } from "svelte";
 import CellMenuIcons from "./CellMenuIcons.svelte";
+import FilterMenu from "./FilterMenu.svelte";
 export let x;
 export let y;
 export let on_add_row_above;
@@ -19,9 +20,15 @@ export let on_clear_sort = () => {
 };
 export let sort_direction = null;
 export let sort_priority = null;
+export let on_filter = () => {
+};
+export let on_clear_filter = () => {
+};
+export let filter_active = null;
 export let editable = true;
 export let i18n;
 let menu_element;
+let active_filter_menu = null;
 $:
   is_header = row === -1;
 $:
@@ -48,6 +55,17 @@ function position_menu() {
   menu_element.style.left = `${new_x}px`;
   menu_element.style.top = `${new_y}px`;
 }
+function toggle_filter_menu() {
+  if (filter_active) {
+    on_filter("string", "", "");
+    return;
+  }
+  const menu_rect = menu_element.getBoundingClientRect();
+  active_filter_menu = {
+    x: menu_rect.right,
+    y: menu_rect.top + menu_rect.height / 2
+  };
+}
 </script>
 
 <div bind:this={menu_element} class="cell-menu" role="menu">
@@ -78,6 +96,21 @@ function position_menu() {
 			<CellMenuIcons icon="clear-sort" />
 			{i18n("dataframe.clear_sort")}
 		</button>
+		<button
+			role="menuitem"
+			on:click|stopPropagation={toggle_filter_menu}
+			class:active={filter_active || active_filter_menu}
+		>
+			<CellMenuIcons icon="filter" />
+			{i18n("dataframe.filter")}
+			{#if filter_active}
+				<span class="priority">1</span>
+			{/if}
+		</button>
+		<button role="menuitem" on:click={on_clear_filter}>
+			<CellMenuIcons icon="clear-filter" />
+			{i18n("dataframe.clear_filter")}
+		</button>
 	{/if}
 
 	{#if !is_header && can_add_rows}
@@ -140,6 +173,10 @@ function position_menu() {
 	{/if}
 </div>
 
+{#if active_filter_menu}
+	<FilterMenu {on_filter} />
+{/if}
+
 <style>
 	.cell-menu {
 		position: fixed;

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/utils/src";
-import type { SortDirection } from "./context/dataframe_context";
+import type { SortDirection, FilterDatatype } from "./context/dataframe_context";
 declare const __propDef: {
     props: {
         x: number;
@@ -20,6 +20,9 @@ declare const __propDef: {
         on_clear_sort?: (() => void) | undefined;
         sort_direction?: (SortDirection | null) | undefined;
         sort_priority?: (number | null) | undefined;
+        on_filter?: ((datatype: FilterDatatype, selected_filter: string, value: string) => void) | undefined;
+        on_clear_filter?: (() => void) | undefined;
+        filter_active?: (boolean | null) | undefined;
         editable?: boolean | undefined;
         i18n: I18nFormatter;
     };

package/dist/shared/CellMenuIcons.svelte

@@ -188,4 +188,52 @@
 			stroke-linecap="round"
 		/>
 	</svg>
+{:else if icon == "filter"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M8 9H16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M11 13H13"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "clear-filter"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M8 9H16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M11 13H13"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M17 17L21 21M21 17L17 21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
 {/if}

package/dist/shared/EditableCell.svelte

@@ -23,7 +23,6 @@ export let on_select_column = null;
 export let on_select_row = null;
 export let el;
 const dispatch = createEventDispatcher();
-let is_expanded = false;
 function truncate_text(text, max_length = null, is_image = false) {
   if (is_image)
     return String(text);
@@ -35,7 +34,7 @@ function truncate_text(text, max_length = null, is_image = false) {
   return str.slice(0, max_length) + "...";
 }
 $:
-  should_truncate = !edit && !is_expanded && max_chars !== null && max_chars > 0;
+  should_truncate = !edit && max_chars !== null && max_chars > 0;
 $:
   display_content = editable ? value : display_value !== null ? display_value : value;
 $:
@@ -53,18 +52,8 @@ function handle_blur(event) {
   });
 }
 function handle_keydown(event) {
-  if (event.key === "Enter") {
-    if (!header) {
-      is_expanded = !is_expanded;
-    }
-  }
   dispatch("keydown", event);
 }
-function handle_click() {
-  if (!edit && !header) {
-    is_expanded = !is_expanded;
-  }
-}
 function handle_bool_change(new_value) {
   value = new_value.toString();
   dispatch("blur", {
@@ -81,10 +70,9 @@ function handle_bool_change(new_value) {
 </script>
 
 {#if edit && datatype !== "bool"}
-	<input
+	<textarea
 		readonly={is_static}
 		aria-readonly={is_static}
-		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
 		bind:value
@@ -92,7 +80,6 @@ function handle_bool_change(new_value) {
 		tabindex="-1"
 		on:blur={handle_blur}
 		on:mousedown|stopPropagation
-		on:mouseup|stopPropagation
 		on:click|stopPropagation
 		use:use_focus
 		on:keydown={handle_keydown}
@@ -108,18 +95,17 @@ function handle_bool_change(new_value) {
 {:else}
 	<span
 		class:dragging={is_dragging}
-		on:click={handle_click}
 		on:keydown={handle_keydown}
 		tabindex="0"
 		role="button"
 		class:edit
-		class:expanded={is_expanded}
+		class:expanded={edit}
 		class:multiline={header}
 		on:focus|preventDefault
 		style={styling}
 		data-editable={editable}
 		data-max-chars={max_chars}
-		data-expanded={is_expanded}
+		data-expanded={edit}
 		placeholder=" "
 		class:text={datatype === "str"}
 		class:wrap={wrap_text}
@@ -167,7 +153,7 @@ function handle_bool_change(new_value) {
 		cursor: crosshair !important;
 	}
 
-	input {
+	textarea {
 		position: absolute;
 		flex: 1 1 0%;
 		transform: translateX(-0.1px);
@@ -176,6 +162,16 @@ function handle_bool_change(new_value) {
 		background: transparent;
 		cursor: text;
 		width: calc(100% - var(--size-2));
+		resize: none;
+		height: 100%;
+		padding-left: 0;
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: var(--line-lg);
+	}
+
+	textarea:focus {
+		outline: none;
 	}
 
 	span {
@@ -227,7 +223,7 @@ function handle_bool_change(new_value) {
 		object-fit: contain;
 	}
 
-	input:read-only {
+	textarea:read-only {
 		cursor: not-allowed;
 	}
 

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

@@ -25,11 +25,10 @@ declare const __propDef: {
         coords: [number, number];
         on_select_column?: (((col: number) => void) | null) | undefined;
         on_select_row?: (((row: number) => void) | null) | undefined;
-        el: HTMLInputElement | null;
+        el: HTMLTextAreaElement | null;
     };
     events: {
         mousedown: MouseEvent;
-        mouseup: MouseEvent;
         click: MouseEvent;
         focus: FocusEvent;
         blur: CustomEvent<{

package/dist/shared/FilterMenu.svelte

@@ -0,0 +1,235 @@
+<script>import { onMount } from "svelte";
+import { Check } from "@gradio/icons";
+import DropdownArrow from "../../icons/src/DropdownArrow.svelte";
+export let on_filter = () => {
+};
+let menu_element;
+let datatype = "string";
+let current_filter = "Contains";
+let filter_dropdown_open = false;
+let filter_input_value = "";
+const filter_options = {
+  string: [
+    "Contains",
+    "Does not contain",
+    "Starts with",
+    "Ends with",
+    "Is",
+    "Is not",
+    "Is empty",
+    "Is not empty"
+  ],
+  number: ["=", "\u2260", ">", "<", "\u2265", "\u2264", "Is empty", "Is not empty"]
+};
+onMount(() => {
+  position_menu();
+});
+function position_menu() {
+  if (!menu_element)
+    return;
+  const viewport_width = window.innerWidth;
+  const viewport_height = window.innerHeight;
+  const menu_rect = menu_element.getBoundingClientRect();
+  const x = (viewport_width - menu_rect.width) / 2;
+  const y = (viewport_height - menu_rect.height) / 2;
+  menu_element.style.left = `${x}px`;
+  menu_element.style.top = `${y}px`;
+}
+function handle_filter_input(e) {
+  const target = e.target;
+  filter_input_value = target.value;
+}
+</script>
+
+<div>
+	<div class="background"></div>
+	<div bind:this={menu_element} class="filter-menu">
+		<div class="filter-datatype-container">
+			<span>Filter as</span>
+			<button
+				on:click|stopPropagation={() => {
+					datatype = datatype === "string" ? "number" : "string";
+					current_filter = filter_options[datatype][0];
+				}}
+				aria-label={`Change filter type. Filtering ${datatype}s`}
+			>
+				{datatype}
+			</button>
+		</div>
+
+		<div class="input-container">
+			<div class="filter-dropdown">
+				<button
+					on:click|stopPropagation={() =>
+						(filter_dropdown_open = !filter_dropdown_open)}
+					aria-label={`Change filter. Using '${current_filter}'`}
+				>
+					{current_filter}
+					<DropdownArrow />
+				</button>
+
+				{#if filter_dropdown_open}
+					<div class="dropdown-filter-options">
+						{#each filter_options[datatype] as opt}
+							<button
+								on:click|stopPropagation={() => {
+									current_filter = opt;
+									filter_dropdown_open = !filter_dropdown_open;
+								}}
+								class="filter-option"
+							>
+								{opt}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<input
+				type="text"
+				value={filter_input_value}
+				on:click|stopPropagation
+				on:input={handle_filter_input}
+				placeholder="Type a value"
+				class="filter-input"
+			/>
+		</div>
+
+		<button
+			class="check-button"
+			on:click={() => on_filter(datatype, current_filter, filter_input_value)}
+		>
+			<Check />
+		</button>
+	</div>
+</div>
+
+<style>
+	.background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.4);
+		z-index: 20;
+	}
+
+	.filter-menu {
+		position: fixed;
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-2);
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+		box-shadow: var(--shadow-drop-lg);
+		width: 300px;
+		z-index: 21;
+	}
+
+	.filter-datatype-container {
+		display: flex;
+		gap: var(--size-2);
+		align-items: center;
+	}
+
+	.filter-menu span {
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+	}
+
+	.filter-menu button {
+		height: var(--size-6);
+		background: none;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-1) var(--size-2);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--size-2);
+	}
+
+	.filter-menu button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.filter-input {
+		width: var(--size-full);
+		height: var(--size-6);
+		padding: var(--size-2);
+		padding-right: var(--size-8);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		background: var(--background-fill-secondary);
+		transition: all 0.2s ease;
+	}
+
+	.filter-input:hover {
+		border-color: var(--border-color-secondary);
+		background: var(--background-fill-primary);
+	}
+
+	.filter-input:focus {
+		outline: none;
+		border-color: var(--color-accent);
+		background: var(--background-fill-primary);
+		box-shadow: 0 0 0 1px var(--color-accent);
+	}
+
+	.dropdown-filter-options {
+		display: flex;
+		flex-direction: column;
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		box-shadow: var(--shadow-drop-md);
+		position: absolute;
+		z-index: var(--layer-1);
+	}
+
+	.dropdown-filter-options .filter-option {
+		border: none;
+		justify-content: flex-start;
+	}
+
+	.input-container {
+		display: flex;
+		gap: var(--size-2);
+		align-items: center;
+	}
+
+	.input-container button {
+		width: 130px;
+	}
+
+	:global(svg.dropdown-arrow) {
+		width: var(--size-4);
+		height: var(--size-4);
+		margin-left: auto;
+	}
+
+	.filter-menu .check-button {
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		width: var(--size-full);
+		height: var(--size-6);
+		border-radius: var(--radius-sm);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--size-1);
+	}
+
+	.check-button:hover {
+		background: var(--color-accent-soft);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { FilterDatatype } from "./context/dataframe_context";
+declare const __propDef: {
+    props: {
+        on_filter?: ((datatype: FilterDatatype, selected_filter: string, value: string) => void) | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FilterMenuProps = typeof __propDef.props;
+export type FilterMenuEvents = typeof __propDef.events;
+export type FilterMenuSlots = typeof __propDef.slots;
+export default class FilterMenu extends SvelteComponent<FilterMenuProps, FilterMenuEvents, FilterMenuSlots> {
+}
+export {};