feat(data frame): Add .update_cell() and .update_data()

CHANGELOG.md

@@ -17,7 +17,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### New features
 
-* Added [narwhals](https://posit-dev.github.io/py-narwhals) support for `@render.data_frame`. This allows for any eager data frame supported by narwhals to be returned from a `@render.data_frame` output method. All internal methods and helper methods leverage the `narwhals` API to be data frame agnostic. (#1570)
+* New features for `@render.data_frame`:
+
+  * Added [narwhals](https://posit-dev.github.io/py-narwhals) support for `@render.data_frame`. This allows for any eager data frame supported by narwhals to be returned from a `@render.data_frame` output method. All internal methods and helper methods now leverage the `narwhals` API to be data frame agnostic. (#1570)
+
+  * Added `.data_patched()` reactive calculation that applies all `.cell_patches()` to `.data()`. (#1719)
+
+  * Added `.update_cell_value()` method to programmatically update the contents of a data frame cell. (#1719)
+
+  * Added `.update_data()` method to update the rendered data without resetting any user sort or filter. Note, all user edits will be forgotten. (#1719)
+
+* Added [narwhals](https://posit-dev.github.io/py-narwhals) support for `@render.table`. This allows for any eager data frame supported by narwhals to be returned from a `@render.table` output method. (#1570)
 
 ### Other changes
 
@@ -41,8 +51,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Added `.expect_class()` and `.expect_multiple()` for `Accordion` in `shiny.playwright.controllers` (#1710)
 
-* Added [narwhals](https://posit-dev.github.io/py-narwhals) support for `@render.table`. This allows for any eager data frame supported by narwhals to be returned from a `@render.table` output method. (#1570)
-
 ### Bug fixes
 
 * A few fixes for `ui.Chat()`, including:
@@ -66,6 +74,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Fixed bug in `@render.data_frame` where `bool` or `object` columns were not being rendered. (#1570)
 
+* Fixed output controller `OutputDataFrame` in `shiny.playwright.controller` to correctly assert the number of rows in `.expect_nrow()` as the total number of virtual rows, not the number of currently displaying rows. (#1719)
+
 
 ## [1.1.0] - 2024-09-03
 

js/data-frame/cell-edit-map.tsx

@@ -48,6 +48,9 @@ export const useCellEditMap = () => {
     cellEditMap,
     // setCellEditMap,
     setCellEditMapAtLoc,
+    resetCellEditMap: () => {
+      setCellEditMap(new Map<string, CellEdit>());
+    },
   } as const;
 };
 

js/data-frame/data-update.tsx

@@ -17,6 +17,62 @@ export type CellPatchPy = {
   // prev: unknown;
 };
 
+type SetDataFn = (fn: (draft: unknown[][]) => void) => void;
+
+export function addPatchToData({
+  setData,
+  newPatches,
+  setCellEditMapAtLoc,
+}: {
+  setData: SetDataFn;
+  newPatches: CellPatch[];
+  setCellEditMapAtLoc: SetCellEditMapAtLoc;
+}): void {
+  // Update data
+  setData((draft) => {
+    newPatches.forEach(({ rowIndex, columnIndex, value }) => {
+      draft[rowIndex]![columnIndex] = value;
+    });
+  });
+  // Set the new patches in cell edit map info
+  newPatches.forEach(({ rowIndex, columnIndex, value }) => {
+    setCellEditMapAtLoc(rowIndex, columnIndex, (obj_draft) => {
+      obj_draft.value = value;
+      obj_draft.state = CellStateEnum.EditSuccess;
+      // Remove save_error if it exists
+      obj_draft.errorTitle = undefined;
+    });
+  });
+}
+
+export function cellPatchPyArrToCellPatchArr(
+  patchesPy: CellPatchPy[]
+): CellPatch[] {
+  const patches: CellPatch[] = patchesPy.map(
+    (patch: CellPatchPy): CellPatch => {
+      return {
+        rowIndex: patch.row_index,
+        columnIndex: patch.column_index,
+        value: patch.value,
+      };
+    }
+  );
+  return patches;
+}
+
+export function cellPatchArrToCellPatchPyArr(
+  patches: CellPatch[]
+): CellPatchPy[] {
+  const patchesPy: CellPatchPy[] = patches.map((patch) => {
+    return {
+      row_index: patch.rowIndex,
+      column_index: patch.columnIndex,
+      value: patch.value,
+    };
+  });
+  return patchesPy;
+}
+
 export function updateCellsData({
   patchInfo,
   patches,
@@ -31,20 +87,13 @@ export function updateCellsData({
   onSuccess: (values: CellPatch[]) => void;
   onError: (err: string) => void;
   columns: readonly string[];
-  setData: (fn: (draft: unknown[][]) => void) => void;
+  setData: SetDataFn;
   setCellEditMapAtLoc: SetCellEditMapAtLoc;
 }) {
   // // Skip page index reset until after next rerender
   // skipAutoResetPageIndex();
 
-  const patchesPy: CellPatchPy[] = patches.map((patch) => {
-    return {
-      row_index: patch.rowIndex,
-      column_index: patch.columnIndex,
-      value: patch.value,
-      // prev: patch.prev,
-    };
-  });
+  const patchesPy = cellPatchArrToCellPatchPyArr(patches);
 
   makeRequestPromise({
     method: patchInfo.key,
@@ -70,21 +119,7 @@ export function updateCellsData({
       }
       newPatchesPy = newPatchesPy as CellPatchPy[];
 
-      const newPatches: CellPatch[] = newPatchesPy.map(
-        (patch: CellPatchPy): CellPatch => {
-          return {
-            rowIndex: patch.row_index,
-            columnIndex: patch.column_index,
-            value: patch.value,
-          };
-        }
-      );
-
-      setData((draft) => {
-        newPatches.forEach(({ rowIndex, columnIndex, value }) => {
-          draft[rowIndex]![columnIndex] = value;
-        });
-      });
+      const newPatches = cellPatchPyArrToCellPatchArr(newPatchesPy);
 
       // Set the old patches locations back to success state
       // This may be overkill, but it guarantees that the incoming patches exit the saving state
@@ -99,15 +134,10 @@ export function updateCellsData({
           obj_draft.errorTitle = undefined;
         });
       });
-      // Set the new patches
-      newPatches.forEach(({ rowIndex, columnIndex, value }) => {
-        setCellEditMapAtLoc(rowIndex, columnIndex, (obj_draft) => {
-          obj_draft.value = value;
-          obj_draft.state = CellStateEnum.EditSuccess;
-          // Remove save_error if it exists
-          obj_draft.errorTitle = undefined;
-        });
-      });
+
+      // Update data and cell edit map with new patches
+      addPatchToData({ setData, newPatches, setCellEditMapAtLoc });
+
       onSuccess(newPatches);
     })
     .catch((err: string) => {

js/data-frame/index.tsx

@@ -2,6 +2,8 @@
 
 // TODO-barret-future; Try to group all related code into a file and make index.tsx as small as possible. Try to move all logic into files and keep the main full of `useFOO` functions.
 
+// TODO-barret-future; Instead of deconstructinng all of the use state objects, keep it as a dictionary and shorten the method names. The docs can live on the _useFoo` function return type. Ex: CellEditMapReturnObject 's setCellEditMapAtLoc should contain JSDoc on it's objects. Then we'd have a `cellEditMap.setAtLoc` method.
+
 import {
   Column,
   ColumnDef,
@@ -28,6 +30,11 @@ import { ErrorsMessageValue } from "rstudio-shiny/srcts/types/src/shiny/shinyapp
 import { useImmer } from "use-immer";
 import { TableBodyCell } from "./cell";
 import { getCellEditMapObj, useCellEditMap } from "./cell-edit-map";
+import {
+  addPatchToData,
+  cellPatchPyArrToCellPatchArr,
+  type CellPatchPy,
+} from "./data-update";
 import { findFirstItemInView, getStyle } from "./dom-utils";
 import { ColumnFiltersState, Filter, FilterValue, useFilters } from "./filter";
 import type { CellSelection, SelectionModesProp } from "./selection";
@@ -106,8 +113,8 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
   bgcolor,
 }) => {
   const {
-    columns,
-    typeHints,
+    columns: columnsProp,
+    typeHints: typeHintsProp,
     data: tableDataProp,
     options: payloadOptions = {
       width: undefined,
@@ -129,6 +136,9 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
   const theadRef = useRef<HTMLTableSectionElement>(null);
   const tbodyRef = useRef<HTMLTableSectionElement>(null);
 
+  const [columns, setColumns] = useImmer(columnsProp);
+  const [typeHints, setTypeHints] = useImmer(typeHintsProp);
+
   const _useStyleInfo = useStyleInfoMap({
     initStyleInfos: initStyleInfos ?? [],
     nrow: tableDataProp.length,
@@ -153,6 +163,10 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
    * Set a cell's state or edit value in the `cellEditMap`
    */
   const setCellEditMapAtLoc = _cellEditMap.setCellEditMapAtLoc;
+  /**
+   * Reset the `cellEditMap` to an empty state
+   */
+  const resetCellEditMap = _cellEditMap.resetCellEditMap;
 
   /**
    * Determines if the user is allowed to edit cells in the table.
@@ -285,6 +299,59 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
     setColumnFilters,
   } = useFilters<unknown[]>(withFilters);
 
+  const updateData = useCallback(
+    ({
+      data,
+      columns,
+      typeHints,
+    }: {
+      data: PandasData<unknown>["data"];
+      columns: readonly string[];
+      typeHints: readonly TypeHint[] | undefined;
+    }) => {
+      setColumns(columns);
+      setTableData(data);
+      setTypeHints(typeHints);
+      resetCellEditMap();
+
+      // Make map for quick lookup of type hints
+      const newTypeHintMap = new Map<string, TypeHint>();
+      typeHints?.forEach((hint, i) => {
+        newTypeHintMap.set(columns[i]!, hint);
+      });
+      // Filter out sorting and column filters that are no longer valid
+      const newSort = sorting.filter((sort) => newTypeHintMap.has(sort.id));
+      const newColumnFilter = columnFilters.filter((filter) => {
+        const typeHint = newTypeHintMap.get(filter.id);
+        if (!typeHint) return false;
+        // Maintain the filter if it's a numeric filter
+        // Drop if it's a string filter
+        if (typeHint.type === "numeric") {
+          return (
+            filter.value === null ||
+            (Array.isArray(filter.value) &&
+              filter.value.every((v) => v !== null))
+          );
+        }
+        // Maintain string filters
+        return typeof filter.value === "string";
+      });
+
+      setColumnFilters(newColumnFilter);
+      setSorting(newSort);
+    },
+    [
+      columnFilters,
+      resetCellEditMap,
+      setColumnFilters,
+      setColumns,
+      setSorting,
+      setTableData,
+      setTypeHints,
+      sorting,
+    ]
+  );
+
   const options: TableOptions<unknown[]> = {
     data: tableData,
     columns: coldefs,
@@ -463,6 +530,66 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
     Shiny.renderDependenciesAsync([...htmlDeps]);
   }, [htmlDeps]);
 
+  useEffect(() => {
+    const handleAddPatches = (
+      event: CustomEvent<{
+        patches: CellPatchPy[];
+      }>
+    ) => {
+      const evtPatches = event.detail.patches;
+      const newPatches = cellPatchPyArrToCellPatchArr(evtPatches);
+
+      // Update data with extra patches
+      addPatchToData({
+        setData: setTableData,
+        newPatches,
+        setCellEditMapAtLoc,
+      });
+    };
+
+    if (!id) return;
+
+    const element = document.getElementById(id);
+    if (!element) return;
+
+    element.addEventListener("addPatches", handleAddPatches as EventListener);
+
+    return () => {
+      element.removeEventListener(
+        "addPatches",
+        handleAddPatches as EventListener
+      );
+    };
+  }, [columns, id, setCellEditMapAtLoc, setSorting, setTableData]);
+
+  useEffect(() => {
+    const handleUpdateData = (
+      event: CustomEvent<{
+        data: PandasData<unknown>["data"];
+        columns: PandasData<unknown>["columns"];
+        typeHints: PandasData<unknown>["typeHints"];
+      }>
+    ) => {
+      const evtData = event.detail;
+
+      updateData(evtData);
+    };
+
+    if (!id) return;
+
+    const element = document.getElementById(id);
+    if (!element) return;
+
+    element.addEventListener("updateData", handleUpdateData as EventListener);
+
+    return () => {
+      element.removeEventListener(
+        "updateData",
+        handleUpdateData as EventListener
+      );
+    };
+  }, [columns, id, resetCellEditMap, setTableData, updateData]);
+
   useEffect(() => {
     const handleColumnSort = (
       event: CustomEvent<{ sort: { col: number; desc: boolean }[] }>
@@ -734,7 +861,7 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
       >
         <table
           className={tableClass + (withFilters ? " filtering" : "")}
-          aria-rowcount={tableData.length}
+          aria-rowcount={table.getRowCount()}
           aria-multiselectable={canMultiRowSelect}
           style={{
             width: width === null || width === "auto" ? undefined : "100%",

shiny/playwright/controller/_output.py

@@ -673,8 +673,9 @@ def __init__(self, page: Page, id: str) -> None:
             loc_container=f"#{id}.html-fill-item",
             loc="> div > div.shiny-data-grid",
         )
-        self.loc_head = self.loc.locator("> table > thead")
-        self.loc_body = self.loc.locator("> table > tbody")
+        self.loc_table = self.loc.locator("> table")
+        self.loc_head = self.loc_table.locator("> thead")
+        self.loc_body = self.loc_table.locator("> tbody")
         self.loc_column_filter = self.loc_head.locator(
             "> tr.filters > th:not(.table-corner)"
         )
@@ -723,8 +724,10 @@ def expect_nrow(self, value: int, *, timeout: Timeout = None):
         timeout
             The maximum time to wait for the expectation to pass. Defaults to `None`.
         """
-        playwright_expect(self.loc_body.locator("> tr")).to_have_count(
-            value, timeout=timeout
+        playwright_expect(self.loc_table).to_have_attribute(
+            "aria-rowcount",
+            str(value),
+            timeout=timeout,
         )
 
     def expect_selected_num_rows(self, value: int, *, timeout: Timeout = None):