@gradio/dataframe 0.17.4 → 0.17.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @gradio/dataframe
 
+## 0.17.6
+
+### Dependency updates
+
+- @gradio/button@0.4.14
+- @gradio/upload@0.16.1
+- @gradio/atoms@0.15.1
+- @gradio/statustracker@0.10.8
+- @gradio/icons@0.12.0
+
+## 0.17.5
+
+### Fixes
+
+- [#10955](https://github.com/gradio-app/gradio/pull/10955) [`d654e60`](https://github.com/gradio-app/gradio/commit/d654e60ff61f76ebcf37f294f1d85305d344a70b) - Map search-filtered row indices to original data indices in gr.Dataframe.  Thanks @hannahblair!
+- [#10918](https://github.com/gradio-app/gradio/pull/10918) [`36da6d0`](https://github.com/gradio-app/gradio/commit/36da6d0d5466dd251f46359019959702523f1afc) - Fix value synchronisation issue in gr.Dataframe.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.7
+- @gradio/button@0.4.13
+- @gradio/atoms@0.15.0
+- @gradio/icons@0.11.0
+- @gradio/upload@0.16.0
+
 ## 0.17.4
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -562,6 +562,7 @@
 
 		const search_input = canvas.getByPlaceholderText("Filter...");
 		await user.type(search_input, "Pet");
+		await user.click(canvas.getByText("Cat"));
 
 		await new Promise((resolve) => setTimeout(resolve, 100));
 
@@ -751,6 +752,34 @@
 	}}
 />
 
+<Story
+	name="Dataframe with display values"
+	args={{
+		values: [
+			[95, 92, 88],
+			[89, 90, 85],
+			[92, 88, 91],
+			[87, 85, 89],
+			[91, 93, 90],
+			[82, 81, 83]
+		],
+		headers: ["Model A", "Model B", "Model C"],
+		display_value: [
+			["🥇 95", "92", "88"],
+			["🥈 89", "90", "85"],
+			["🥉 92", "88", "91"],
+			["87", "85", "89"],
+			["91", "93", "90"],
+			["82", "81", "83"]
+		],
+		label: "Model Performance with Medal Indicators",
+		col_count: [3, "dynamic"],
+		row_count: [6, "dynamic"],
+		show_row_numbers: true,
+		editable: false
+	}}
+/>
+
 <Story
 	name="Dataframe with text wrapping, no max chars"
 	args={{

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/table_context";
+import type { SortDirection } from "./context/dataframe_context";
 declare const __propDef: {
     props: {
         x: number;

package/dist/shared/EditableCell.svelte

@@ -8,7 +8,6 @@ export let styling = "";
 export let header = false;
 export let datatype = "str";
 export let latex_delimiters;
-export let clear_on_focus = false;
 export let line_breaks = true;
 export let editable = true;
 export let is_static = false;
@@ -19,14 +18,12 @@ export let i18n;
 export let is_dragging = false;
 export let wrap_text = false;
 export let show_selection_buttons = false;
-export let coords = null;
+export let coords;
 export let on_select_column = null;
 export let on_select_row = null;
 const dispatch = createEventDispatcher();
 let is_expanded = false;
 export let el;
-$:
-  _value = value;
 function truncate_text(text, max_length = null, is_image = false) {
   if (is_image)
     return String(text);
@@ -44,26 +41,20 @@ $:
 $:
   display_text = should_truncate ? truncate_text(display_content, max_chars, datatype === "image") : display_content;
 function use_focus(node) {
-  if (clear_on_focus) {
-    _value = "";
-  }
   requestAnimationFrame(() => {
     node.focus();
   });
   return {};
 }
-function handle_blur({
-  currentTarget
-}) {
-  value = currentTarget.value;
-  dispatch("blur");
+function handle_blur(event) {
+  dispatch("blur", {
+    blur_event: event,
+    coords
+  });
 }
 function handle_keydown(event) {
   if (event.key === "Enter") {
-    if (edit) {
-      value = _value;
-      dispatch("blur");
-    } else if (!header) {
+    if (!header) {
       is_expanded = !is_expanded;
     }
   }
@@ -83,7 +74,7 @@ function handle_click() {
 		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
-		bind:value={_value}
+		bind:value
 		class:header
 		tabindex="-1"
 		on:blur={handle_blur}

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

@@ -13,7 +13,6 @@ declare const __propDef: {
             right: string;
             display: boolean;
         }[];
-        clear_on_focus?: boolean | undefined;
         line_breaks?: boolean | undefined;
         editable?: boolean | undefined;
         is_static?: boolean | undefined;
@@ -24,7 +23,7 @@ declare const __propDef: {
         is_dragging?: boolean | undefined;
         wrap_text?: boolean | undefined;
         show_selection_buttons?: boolean | undefined;
-        coords?: ([number, number] | null) | undefined;
+        coords: [number, number];
         on_select_column?: (((col: number) => void) | null) | undefined;
         on_select_row?: (((row: number) => void) | null) | undefined;
         el: HTMLInputElement | null;
@@ -34,7 +33,10 @@ declare const __propDef: {
         mouseup: MouseEvent;
         click: MouseEvent;
         focus: FocusEvent;
-        blur: CustomEvent<void>;
+        blur: CustomEvent<{
+            blur_event: FocusEvent;
+            coords: [number, number];
+        }>;
         keydown: CustomEvent<KeyboardEvent>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/shared/Table.svelte

@@ -1,8 +1,6 @@
 <script context="module">import {
   create_dataframe_context
-} from "./context/table_context";
-import { create_keyboard_context } from "./context/keyboard_context";
-import { create_selection_context } from "./context/selection_context";
+} from "./context/dataframe_context";
 </script>
 
 <script>import { afterUpdate, createEventDispatcher, tick, onMount } from "svelte";
@@ -20,9 +18,6 @@ import Toolbar from "./Toolbar.svelte";
 import {
   is_cell_selected,
   should_show_cell_menu,
-  get_next_cell_coordinates,
-  get_range_selection,
-  move_cursor,
   get_current_indices,
   handle_click_outside as handle_click_outside_util,
   calculate_selection_positions
@@ -33,7 +28,7 @@ import {
   handle_file_upload
 } from "./utils/table_utils";
 import { make_headers, process_data } from "./utils/data_processing";
-import { handle_keydown } from "./utils/keyboard_utils";
+import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 import {
   create_drag_handlers
 } from "./utils/drag_utils";
@@ -64,9 +59,7 @@ export let max_chars = void 0;
 export let show_search = "none";
 export let pinned_columns = 0;
 export let static_columns = [];
-$:
-  actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
-const { state: df_state, actions: df_actions } = create_dataframe_context({
+const df_ctx = create_dataframe_context({
   show_fullscreen_button,
   show_copy_button,
   show_search,
@@ -80,25 +73,13 @@ const { state: df_state, actions: df_actions } = create_dataframe_context({
   column_widths,
   max_chars
 });
+const { state: df_state, actions: df_actions } = df_ctx;
 $:
   selected_cells = $df_state.ui_state.selected_cells;
-let previous_selected_cells = [];
-$: {
-  if (copy_flash && !dequal(selected_cells, previous_selected_cells)) {
-    keyboard_ctx?.set_copy_flash(false);
-  }
-  previous_selected_cells = selected_cells;
-}
 $:
   selected = $df_state.ui_state.selected;
-export let display_value = null;
-export let styling = null;
-let els = {};
-let data_binding = {};
-const dispatch = createEventDispatcher();
 $:
   editing = $df_state.ui_state.editing;
-let clear_on_focus = false;
 $:
   header_edit = $df_state.ui_state.header_edit;
 $:
@@ -107,10 +88,55 @@ $:
   active_cell_menu = $df_state.ui_state.active_cell_menu;
 $:
   active_header_menu = $df_state.ui_state.active_header_menu;
+$:
+  copy_flash = $df_state.ui_state.copy_flash;
+$:
+  actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
+onMount(() => {
+  df_ctx.parent_element = parent;
+  df_ctx.get_data_at = get_data_at;
+  df_ctx.dispatch = dispatch;
+  init_drag_handlers();
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && !is_visible) {
+        set_cell_widths();
+      }
+      is_visible = entry.isIntersecting;
+    });
+  });
+  observer.observe(parent);
+  document.addEventListener("click", handle_click_outside);
+  window.addEventListener("resize", handle_resize);
+  document.addEventListener("fullscreenchange", handle_fullscreen_change);
+  return () => {
+    observer.disconnect();
+    document.removeEventListener("click", handle_click_outside);
+    window.removeEventListener("resize", handle_resize);
+    document.removeEventListener(
+      "fullscreenchange",
+      handle_fullscreen_change
+    );
+  };
+});
+$:
+  if (data || _headers || els) {
+    df_ctx.data = data;
+    df_ctx.headers = _headers;
+    df_ctx.els = els;
+  }
+const dispatch = createEventDispatcher();
+let els = {};
+let data_binding = {};
+let _headers = make_headers(headers, col_count, els, make_id);
+let old_headers = headers;
+let data = [[]];
+let old_val = void 0;
+let search_results = [[]];
 let is_fullscreen = false;
 let dragging = false;
-let copy_flash = false;
 let color_accent_copied;
+let filtered_to_original_map = [];
 onMount(() => {
   const color = getComputedStyle(document.documentElement).getPropertyValue("--color-accent").trim();
   color_accent_copied = color + "40";
@@ -120,20 +146,17 @@ onMount(() => {
   );
 });
 const get_data_at = (row, col) => data?.[row]?.[col]?.value;
-function make_id() {
-  return Math.random().toString(36).substring(2, 15);
-}
-let _headers = make_headers(headers, col_count, els, make_id);
-let old_headers = headers;
 $: {
   if (!dequal(headers, old_headers)) {
     _headers = make_headers(headers, col_count, els, make_id);
     old_headers = JSON.parse(JSON.stringify(headers));
   }
 }
-let data = [[]];
-let old_val = void 0;
-let search_results = [[]];
+function make_id() {
+  return Math.random().toString(36).substring(2, 15);
+}
+export let display_value = null;
+export let styling = null;
 $:
   if (!dequal(values, old_val)) {
     if (parent) {
@@ -172,10 +195,17 @@ $:
 $:
   if ($df_state.current_search_query !== void 0) {
     const cell_map = /* @__PURE__ */ new Map();
+    filtered_to_original_map = [];
     data.forEach((row, row_idx) => {
+      if (row.some(
+        (cell) => String(cell?.value).toLowerCase().includes($df_state.current_search_query?.toLowerCase() || "")
+      )) {
+        filtered_to_original_map.push(row_idx);
+      }
       row.forEach((cell, col_idx) => {
         cell_map.set(cell.id, {
           value: cell.value,
+          display_value: cell.display_value || String(cell.value),
           styling: styling?.[row_idx]?.[col_idx] || ""
         });
       });
@@ -191,6 +221,8 @@ $:
         };
       })
     );
+  } else {
+    filtered_to_original_map = [];
   }
 let previous_headers = _headers.map((h) => h.value);
 let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
@@ -216,21 +248,13 @@ function clear_sort() {
   df_actions.reset_sort_state();
   sort_data(data, display_value, styling);
 }
-$: {
-  df_actions.sort_data(data, display_value, styling);
-  df_actions.update_row_order(data);
-}
-$: {
-  if ($df_state.sort_state.sort_columns) {
-    if ($df_state.sort_state.sort_columns.length > 0) {
-      sort_data(data, display_value, styling);
-    }
+$:
+  if ($df_state.sort_state.sort_columns.length > 0) {
+    sort_data(data, display_value, styling);
+    df_actions.update_row_order(data);
   }
-}
 async function edit_header(i, _select = false) {
-  if (!editable || header_edit === i)
-    return;
-  if (!editable || col_count[1] !== "dynamic" || header_edit === i)
+  if (!editable || header_edit === i || col_count[1] !== "dynamic")
     return;
   df_actions.set_header_edit(i);
 }
@@ -242,7 +266,6 @@ function handle_header_click(event, col) {
   event.stopPropagation();
   if (!editable)
     return;
-  clear_on_focus = false;
   df_actions.set_editing(false);
   df_actions.handle_header_click(col, editable);
   parent.focus();
@@ -269,7 +292,6 @@ async function add_row(index) {
   } else {
     data.push(new_row);
   }
-  data = data;
   selected = [index !== void 0 ? index : data.length - 1, 0];
 }
 async function add_col(index) {
@@ -357,87 +379,25 @@ function sort_data(_data, _display_value, _styling) {
   data = result.data;
   selected = result.selected;
 }
-$:
-  sort_data(data, display_value, styling);
 $:
   selected_index = !!selected && selected[0];
 let is_visible = false;
-onMount(() => {
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting && !is_visible) {
-        set_cell_widths();
-        data = data;
-      }
-      is_visible = entry.isIntersecting;
-    });
-  });
-  observer.observe(parent);
-  document.addEventListener("click", handle_click_outside);
-  window.addEventListener("resize", handle_resize);
-  document.addEventListener("fullscreenchange", handle_fullscreen_change);
-  return () => {
-    observer.disconnect();
-    document.removeEventListener("click", handle_click_outside);
-    window.removeEventListener("resize", handle_resize);
-    document.removeEventListener(
-      "fullscreenchange",
-      handle_fullscreen_change
-    );
-  };
-});
-$:
-  keyboard_ctx = create_keyboard_context({
-    selected_header,
-    header_edit,
-    editing,
-    selected,
-    selected_cells,
-    editable,
-    data,
-    headers: _headers,
-    els,
-    df_actions,
-    dispatch,
-    add_row,
-    get_next_cell_coordinates,
-    get_range_selection,
-    move_cursor,
-    copy_flash,
-    parent_element: parent,
-    set_copy_flash: (value) => {
-      copy_flash = value;
-      if (value) {
-        setTimeout(() => {
-          copy_flash = false;
-        }, 800);
-      }
-    }
-  });
-$:
-  selection_ctx = create_selection_context({
-    df_actions,
-    dispatch,
-    data,
-    els,
-    editable,
-    show_row_numbers,
-    get_data_at,
-    clear_on_focus,
-    selected_cells,
-    parent_element: parent
-  });
-function handle_cell_click(event, row, col) {
-  selection_ctx.actions.handle_cell_click(event, row, col);
-}
-function toggle_cell_menu(event, row, col) {
-  selection_ctx.actions.toggle_cell_menu(event, row, col);
-}
-function handle_select_column(col) {
-  selection_ctx.actions.handle_select_column(col);
+const set_copy_flash = (value) => {
+  df_actions.set_copy_flash(value);
+  if (value) {
+    setTimeout(() => df_actions.set_copy_flash(false), 800);
+  }
+};
+let previous_selected_cells = [];
+$: {
+  if (copy_flash && !dequal(selected_cells, previous_selected_cells)) {
+    set_copy_flash(false);
+  }
+  previous_selected_cells = selected_cells;
 }
-function handle_select_row(row) {
-  selection_ctx.actions.handle_select_row(row);
+function handle_blur(event) {
+  const { blur_event, coords } = event.detail;
+  handle_cell_blur(blur_event, df_ctx, coords);
 }
 function toggle_fullscreen() {
   if (!document.fullscreenElement) {
@@ -490,10 +450,10 @@ function delete_row_at(index) {
   df_actions.set_active_cell_menu(null);
   df_actions.set_active_header_menu(null);
 }
-let coords;
+let selected_cell_coords;
 $:
   if (selected !== false)
-    coords = selected;
+    selected_cell_coords = selected;
 $:
   if (selected !== false) {
     const positions = calculate_selection_positions(
@@ -595,7 +555,7 @@ function init_drag_handlers() {
     (value) => is_dragging = value,
     (cells2) => df_actions.set_selected_cells(cells2),
     (cell) => df_actions.set_selected(cell),
-    (event, row, col) => selection_ctx.actions.handle_cell_click(event, row, col),
+    (event, row, col) => df_actions.handle_cell_click(event, row, col),
     show_row_numbers,
     parent
   );
@@ -612,6 +572,16 @@ $:
 $:
   handle_mouse_up = drag_handlers?.handle_mouse_up || (() => {
   });
+function get_cell_display_value(row, col) {
+  const is_search_active = $df_state.current_search_query !== void 0;
+  if (is_search_active && search_results?.[row]?.[col]) {
+    return search_results[row][col].display_value || String(search_results[row][col].value);
+  }
+  if (data?.[row]?.[col]) {
+    return data[row][col].display_value || String(data[row][col].value);
+  }
+  return "";
+}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -644,7 +614,7 @@ $:
 		class:no-wrap={!wrap}
 		style="height:{table_height}px;"
 		class:menu-open={active_cell_menu || active_header_menu}
-		on:keydown={(e) => handle_keydown(e, keyboard_ctx)}
+		on:keydown={(e) => handle_keydown(e, df_ctx)}
 		on:mousemove={handle_mouse_move}
 		on:mouseup={handle_mouse_up}
 		on:mouseleave={handle_mouse_up}
@@ -667,7 +637,6 @@ $:
 							{actual_pinned_columns}
 							{header_edit}
 							{selected_header}
-							get_sort_status={df_actions.get_sort_status}
 							{headers}
 							{get_cell_width}
 							{handle_header_click}
@@ -708,10 +677,11 @@ $:
 									show_selection_buttons={selected_cells.length === 1 &&
 										selected_cells[0][0] === 0 &&
 										selected_cells[0][1] === j}
-									coords={[0, j]}
-									on_select_column={handle_select_column}
-									on_select_row={handle_select_row}
+									coords={selected_cell_coords}
+									on_select_column={df_actions.handle_select_column}
+									on_select_row={df_actions.handle_select_row}
 									{is_dragging}
+									on:blur={handle_blur}
 								/>
 							</div>
 						</td>
@@ -773,7 +743,6 @@ $:
 								{actual_pinned_columns}
 								{header_edit}
 								{selected_header}
-								get_sort_status={df_actions.get_sort_status}
 								{headers}
 								{get_cell_width}
 								{handle_header_click}
@@ -799,12 +768,17 @@ $:
 						{#each item as { value, id }, j (id)}
 							<TableCell
 								bind:value={search_results[index][j].value}
-								{index}
+								display_value={get_cell_display_value(index, j)}
+								index={$df_state.current_search_query !== undefined &&
+								filtered_to_original_map[index] !== undefined
+									? filtered_to_original_map[index]
+									: index}
 								{j}
 								{actual_pinned_columns}
 								{get_cell_width}
 								handle_cell_click={(e, r, c) => handle_mouse_down(e, r, c)}
-								{toggle_cell_menu}
+								{handle_blur}
+								toggle_cell_menu={df_actions.toggle_cell_menu}
 								{is_cell_selected}
 								{should_show_cell_menu}
 								{selected_cells}
@@ -815,15 +789,14 @@ $:
 								{line_breaks}
 								datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 								{editing}
-								{clear_on_focus}
 								{max_chars}
 								{root}
 								{editable}
 								is_static={static_columns.includes(j)}
 								{i18n}
 								{components}
-								{handle_select_column}
-								{handle_select_row}
+								handle_select_column={df_actions.handle_select_column}
+								handle_select_row={df_actions.handle_select_row}
 								bind:el={els[id]}
 								{is_dragging}
 								{wrap}

package/dist/shared/TableCell.svelte

@@ -7,6 +7,7 @@ export let j;
 export let actual_pinned_columns;
 export let get_cell_width;
 export let handle_cell_click;
+export let handle_blur;
 export let toggle_cell_menu;
 export let is_cell_selected;
 export let should_show_cell_menu;
@@ -18,7 +19,6 @@ export let latex_delimiters;
 export let line_breaks;
 export let datatype;
 export let editing;
-export let clear_on_focus;
 export let max_chars;
 export let root;
 export let editable;
@@ -29,6 +29,7 @@ export let el;
 export let handle_select_column;
 export let handle_select_row;
 export let is_dragging;
+export let display_value;
 export let wrap = false;
 function get_cell_position(col_index) {
   if (col_index >= actual_pinned_columns) {
@@ -83,16 +84,13 @@ $:
 		<EditableCell
 			bind:value
 			bind:el={el.input}
-			display_value={String(value)}
+			display_value={display_value || String(value)}
 			{latex_delimiters}
 			{line_breaks}
 			{editable}
 			{is_static}
 			edit={editing && editing[0] === index && editing[1] === j}
 			{datatype}
-			on:blur={() => {
-				clear_on_focus = false;
-			}}
 			on:focus={() => {
 				const row = index;
 				const col = j;
@@ -100,7 +98,7 @@ $:
 					selected_cells = [[row, col]];
 				}
 			}}
-			{clear_on_focus}
+			on:blur={handle_blur}
 			{root}
 			{max_chars}
 			{i18n}

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

@@ -9,6 +9,10 @@ declare const __propDef: {
         actual_pinned_columns: number;
         get_cell_width: (index: number) => string;
         handle_cell_click: (event: MouseEvent, row: number, col: number) => void;
+        handle_blur: (event: CustomEvent<{
+            blur_event: FocusEvent;
+            coords: [number, number];
+        }>) => void;
         toggle_cell_menu: (event: MouseEvent, row: number, col: number) => void;
         is_cell_selected: (coords: [number, number], selected_cells: [number, number][]) => string;
         should_show_cell_menu: (coords: [number, number], selected_cells: [number, number][], editable: boolean) => boolean;
@@ -29,7 +33,6 @@ declare const __propDef: {
         line_breaks: boolean;
         datatype: Datatype;
         editing: [number, number] | false;
-        clear_on_focus: boolean;
         max_chars: number | undefined;
         root: string;
         editable: boolean;
@@ -43,6 +46,7 @@ declare const __propDef: {
         handle_select_column: (col: number) => void;
         handle_select_row: (row: number) => void;
         is_dragging: boolean;
+        display_value: string | undefined;
         wrap?: boolean | undefined;
     };
     events: {