@dxos/react-ui-table 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/src/model/table-model.ts

@@ -3,47 +3,32 @@
 //
 
 import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
-import orderBy from 'lodash.orderby';
 
 import { Resource } from '@dxos/context';
-import { getValue, setValue, FormatEnum, type JsonProp } from '@dxos/echo-schema';
+import { type FieldSortType, FormatEnum, getValue, setValue, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import { isReactiveObject, makeRef } from '@dxos/live-object';
 import { PublicKey } from '@dxos/react-client';
-import {
-  cellClassesForFieldType,
-  cellClassesForRowSelection,
-  formatForDisplay,
-  formatForEditing,
-  parseValue,
-} from '@dxos/react-ui-form';
+import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridCellValue,
-  type DxGridPlane,
-  type DxGridPlaneCells,
   type DxGridPlaneRange,
   type DxGridPlanePosition,
-  toPlaneCellIndex,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type ViewProjection, type FieldType } from '@dxos/schema';
+import { type ViewProjection } from '@dxos/schema';
 
-import { ModalController } from './modal-controller';
 import { SelectionModel } from './selection-model';
+import { TableSorting } from './table-sorting';
 import { type TableType } from '../types';
-import { tableButtons, touch } from '../util';
-import { tableControls } from '../util/table-controls';
-
-export type SortDirection = 'asc' | 'desc';
-export type SortConfig = { fieldId: string; direction: SortDirection };
+import { touch } from '../util';
 
 export type BaseTableRow = Record<JsonProp, any> & { id: string };
 
 export type TableModelProps<T extends BaseTableRow = { id: string }> = {
   table: TableType;
   projection: ViewProjection;
-  sorting?: SortConfig[];
+  sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
   onInsertRow?: (index?: number) => void;
   onDeleteRows?: (index: number, obj: T[]) => void;
@@ -63,28 +48,18 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     end: { row: 0, col: 0 },
   });
 
-  /**
-   * Maps display indices to data indices.
-   * Used for translating between sorted/displayed order and original data order.
-   * Keys are display indices, values are corresponding data indices.
-   */
-  private readonly _displayToDataIndex: Map<number, number> = new Map();
-
   private readonly _onInsertRow?: TableModelProps<T>['onInsertRow'];
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
   private readonly _onRowOrderChanged?: TableModelProps<T>['onRowOrderChanged'];
 
-  private readonly _sorting = signal<SortConfig | undefined>(undefined);
-  private _sortedRows!: ReadonlySignal<T[]>;
-  private _rows = signal<T[]>([]);
+  private readonly _rows = signal<T[]>([]);
+  private readonly _sorting: TableSorting<T>;
 
   private _pinnedRows: NonNullable<TableModelProps<T>['pinnedRows']>;
-
   private _selection!: SelectionModel<T>;
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
-  private readonly _modalController = new ModalController();
 
   constructor({
     table,
@@ -100,8 +75,13 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     super();
     this._table = table;
     this._projection = projection;
+    this._sorting = new TableSorting(this._rows, table.view?.target, projection);
+
+    if (sorting.length > 0) {
+      const [sort] = sorting;
+      this._sorting.setSort(sort.fieldId, sort.direction);
+    }
 
-    this._sorting.value = sorting.at(0);
     this._pinnedRows = pinnedRows;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
@@ -118,6 +98,17 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._projection;
   }
 
+  public get rows(): ReadonlySignal<T[]> {
+    return this._sorting.sortedRows;
+  }
+
+  /**
+   * @reactive
+   */
+  public get sorting(): TableSorting<T> | undefined {
+    return this._sorting;
+  }
+
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
     return this._pinnedRows;
   }
@@ -127,33 +118,29 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._columnMeta;
   }
 
-  public get sorting(): SortConfig | undefined {
-    return this._sorting.value;
-  }
-
-  public get modalController() {
-    return this._modalController;
-  }
-
   public get selection() {
     return this._selection;
   }
 
+  /** @reactive */
+  public get isViewDirty(): boolean {
+    return this._sorting.isDirty;
+  }
+
   //
   // Initialisation
   //
 
   protected override async _open() {
     this.initializeColumnMeta();
-    this.initializeSorting();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
     await this._selection.open(this._ctx);
   }
 
   private initializeColumnMeta(): void {
     this._columnMeta = computed(() => {
-      const fields = this._table.view?.fields ?? [];
+      const fields = this._table.view?.target?.fields ?? [];
       const meta = Object.fromEntries(
         fields.map((field, index: number) => [index, { size: field?.size ?? 256, resizeable: true }]),
       );
@@ -166,39 +153,9 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     });
   }
 
-  private initializeSorting(): void {
-    this._sortedRows = computed(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
-      }
-
-      const field = this._table.view?.fields.find((field) => field.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const value = getValue(item, field.path);
-        return { item, index, value, isEmpty: value == null || value === '' };
-      });
-      const sorted = orderBy(dataWithIndices, ['isEmpty', 'value'], ['asc', sort.direction]);
-
-      for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
-        const { index: dataIndex } = sorted[displayIndex];
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      }
-
-      return sorted.map(({ item }) => item);
-    });
-  }
-
   private initializeEffects(): void {
     const rowOrderWatcher = effect(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -214,8 +171,8 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(
           effect(() => {
-            const obj = this._sortedRows.value[row];
-            this?._table?.view?.fields.forEach((field) => touch(getValue(obj, field.path)));
+            const obj = this._sorting.sortedRows.value[row];
+            this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
         );
@@ -226,181 +183,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._ctx.onDispose(rowEffectManager);
   }
 
-  //
-  // Get Cells
-  //
-
-  public getCells = (range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells => {
-    switch (plane) {
-      case 'grid': {
-        this._visibleRange.value = range;
-        return this.getMainGridCells(range);
-      }
-      case 'frozenRowsStart': {
-        return this.getHeaderCells(range);
-      }
-      case 'frozenColsStart': {
-        return this.getSelectionColumnCells(range);
-      }
-      case 'frozenColsEnd': {
-        return this.getActionColumnCells(range);
-      }
-      case 'fixedStartStart': {
-        return this.getSelectAllCell();
-      }
-      case 'fixedStartEnd': {
-        return this.getNewColumnCell();
-      }
-      default: {
-        return {};
-      }
-    }
-  };
-
-  private getMainGridCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    const fields = this._table.view?.fields ?? [];
-
-    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
-      const { props } = this._projection.getFieldProjection(field.id);
-
-      const cell: DxGridCellValue = {
-        get value() {
-          const value = getValue(obj, field.path);
-          if (value == null) {
-            return '';
-          }
-
-          switch (props.format) {
-            case FormatEnum.Ref: {
-              if (!field.referencePath) {
-                return ''; // TODO(burdon): Show error.
-              }
-
-              return getValue(value, field.referencePath);
-            }
-
-            default: {
-              return formatForDisplay({ type: props.type, format: props.format, value });
-            }
-          }
-        },
-      };
-
-      const classes = [];
-      const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
-      if (formatClasses) {
-        classes.push(formatClasses);
-      }
-      const rowSelectionClasses = cellClassesForRowSelection(this._selection.isObjectSelected(obj));
-      if (rowSelectionClasses) {
-        classes.push(rowSelectionClasses);
-      }
-      if (classes.length > 0) {
-        cell.className = mx(classes.flat());
-      }
-
-      if (cell.value && props.format === FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = getValue(obj, field.path);
-        cell.accessoryHtml = tableButtons.referencedCell.render({
-          targetId: targetObj.id,
-          schemaId: props.referenceSchema,
-        });
-      }
-
-      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
-      cells[idx] = cell;
-    };
-
-    for (let row = range.start.row; row <= range.end.row && row < this._sortedRows.value.length; row++) {
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
-
-        addCell(this._sortedRows.value[row], field, col, row);
-      }
-    }
-
-    return cells;
-  };
-
-  private getHeaderCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    const fields = this.table.view?.fields ?? [];
-    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-      const { field, props } = this._projection.getFieldProjection(fields[col].id);
-      cells[toPlaneCellIndex({ col, row: 0 })] = {
-        // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
-        resizeHandle: 'col',
-        accessoryHtml: tableButtons.columnSettings.render({ fieldId: field.id }),
-      };
-    }
-
-    return cells;
-  };
-
-  private getSelectionColumnCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
-      const isSelected = this._selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
-      cells[toPlaneCellIndex({ col: 0, row })] = {
-        value: '',
-        readonly: true,
-        className: classes ? mx(classes) : undefined,
-        accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
-      };
-    }
-
-    return cells;
-  };
-
-  private getActionColumnCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
-      const isSelected = this._selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
-      cells[toPlaneCellIndex({ col: 0, row })] = {
-        value: '',
-        readonly: true,
-        className: classes ? mx(classes) : undefined,
-        accessoryHtml: tableButtons.rowMenu.render({ rowIndex: row }),
-      };
-    }
-
-    return cells;
-  };
-
-  private getSelectAllCell = (): DxGridPlaneCells => {
-    return {
-      [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        value: '',
-        accessoryHtml: tableControls.checkbox.render({
-          rowIndex: 0,
-          header: true,
-          checked: this._selection.allRowsSeleted.value,
-        }),
-        readonly: true,
-      },
-    };
-  };
-
-  private getNewColumnCell = (): DxGridPlaneCells => {
-    return {
-      [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        value: '',
-        accessoryHtml: tableButtons.addColumn.render({
-          disabled: (this._table.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
-        }),
-        readonly: true,
-      },
-    };
-  };
-
   //
   // Data
   //
@@ -411,15 +193,15 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public getRowCount = (): number => this._rows.value.length;
 
-  public getColumnCount = (): number => this.table.view?.fields.length ?? 0;
+  public getColumnCount = (): number => this.table.view?.target?.fields.length ?? 0;
 
   public insertRow = (rowIndex?: number): void => {
-    const row = rowIndex !== undefined ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+    const row = rowIndex !== undefined ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
     this._onInsertRow?.(row);
   };
 
   public deleteRow = (rowIndex: number): void => {
-    const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+    const row = this._sorting.getDataIndex(rowIndex);
     const obj = this._rows.value[row];
     const objectsToDelete = [];
 
@@ -434,13 +216,13 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   };
 
   public getCellData = ({ col, row }: DxGridPlanePosition): any => {
-    const fields = this.table.view?.fields ?? [];
+    const fields = this.table.view?.target?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return undefined;
     }
 
     const field = fields[col];
-    const dataIndex = this._displayToDataIndex.get(row) ?? row;
+    const dataIndex = this._sorting.getDataIndex(row);
     const value = getValue(this._rows.value[dataIndex], field.path);
     if (value == null) {
       return '';
@@ -453,7 +235,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
           return ''; // TODO(burdon): Show error.
         }
 
-        return getValue(value, field.referencePath);
+        return getValue(value.target, field.referencePath);
       }
 
       default: {
@@ -463,8 +245,8 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   };
 
   public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
-    const rowIdx = this._displayToDataIndex.get(row) ?? row;
-    const fields = this.table.view?.fields ?? [];
+    const rowIdx = this._sorting.getDataIndex(row);
+    const fields = this.table.view?.target?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
     }
@@ -473,7 +255,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     const { props } = this._projection.getFieldProjection(field.id);
     switch (props.format) {
       case FormatEnum.Ref: {
-        setValue(this._rows.value[rowIdx], field.path, value);
+        // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
+        //   plain string value. Maybe onBlur should be called with the actual value?
+        if (isReactiveObject(value)) {
+          setValue(this._rows.value[rowIdx], field.path, makeRef(value));
+        }
         break;
       }
 
@@ -492,6 +278,21 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
   };
 
+  /**
+   * Updates a cell's value using a transform function.
+   * @param {DxGridPlanePosition} position - The position of the cell to update.
+   * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
+   */
+  public updateCellData({ col, row }: DxGridPlanePosition, update: (value: any) => any): void {
+    const dataRow = this._sorting.getDataIndex(row);
+    const fields = this.table.view?.target?.fields ?? [];
+    const field = fields[col];
+
+    const value = getValue(this._rows.value[dataRow], field.path);
+    const updatedValue = update(value);
+    setValue(this._rows.value[dataRow], field.path, updatedValue);
+  }
+
   //
   // Column Operations
   //
@@ -501,45 +302,18 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
       return;
     }
 
-    const field = this.table.view.fields.find((field) => field.id === fieldId);
+    const field = this.table.view.target?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
-      }
       this._onDeleteColumn(field.id);
     }
   }
 
-  //
-  // Interactions
-  //
-  public handleGridClick = (event: React.MouseEvent): void => {
-    if (!this._modalController.handleClick(event)) {
-      const target = event.target as HTMLElement;
-
-      const selectionCheckbox = target.closest(`input[${tableControls.checkbox.attributes.checkbox}]`);
-      if (selectionCheckbox) {
-        const isHeader = selectionCheckbox.hasAttribute(tableControls.checkbox.attributes.header);
-        if (isHeader) {
-          if (this._selection.allRowsSeleted.value) {
-            this._selection.setSelection('none');
-          } else {
-            this._selection.setSelection('all');
-          }
-        } else {
-          const rowIndex = Number(selectionCheckbox.getAttribute(tableControls.checkbox.attributes.checkbox));
-          this._selection.toggleSelectionForRowIndex(rowIndex);
-        }
-      }
-    }
-  };
-
   //
   // Resize
   //
 
   public setColumnWidth(columnIndex: number, width: number): void {
-    const fields = this.table.view?.fields ?? [];
+    const fields = this.table.view?.target?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];
@@ -549,18 +323,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
   }
 
-  //
-  // Sorting
-  //
-
-  public setSort(fieldId: string, direction: SortDirection): void {
-    this._sorting.value = { fieldId, direction };
-  }
-
-  public clearSort(): void {
-    this._sorting.value = undefined;
-  }
-
   //
   // Pinning
   //
@@ -574,4 +336,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._pinnedRows.top = this._pinnedRows.top.filter((index: number) => index !== rowIndex);
     this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index: number) => index !== rowIndex);
   }
+
+  //
+  // View operations
+  //
+  public saveView(): void {
+    this._sorting.save();
+  }
 }

package/src/model/table-presentation.test.ts

@@ -0,0 +1,102 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import { S, TypedObject } from '@dxos/echo-schema';
+import { create, makeRef } from '@dxos/live-object';
+import { createEchoSchema } from '@dxos/live-object/testing';
+import { createView, ViewProjection } from '@dxos/schema';
+
+import { TableModel, type TableModelProps } from './table-model';
+import { TablePresentation } from './table-presentation';
+import { TableType } from '../types';
+
+describe('TablePresentation', () => {
+  describe('row reactivity', () => {
+    let data: any[];
+    let updateCount: number;
+    let model: any;
+    let presentation: TablePresentation;
+
+    beforeEach(async () => {
+      updateCount = 0;
+      ({ data } = create({
+        data: [
+          { col1: 'A', col2: 1, col3: true },
+          { col1: 'B', col2: 2, col3: false },
+        ],
+      }));
+
+      model = createTableModel({
+        onCellUpdate: () => updateCount++,
+      });
+      model.setRows(data);
+      await model.open();
+      presentation = new TablePresentation(model);
+    });
+
+    it('should update with row-level reactivity', () => {
+      // Set up visible range to include our test data.
+      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
+
+      // Trigger a row update.
+      data[0].col1 = 'New Value';
+      expect(updateCount).toBe(1);
+
+      // Verify the new value through getCells.
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
+      expect(cells['0,0']?.value).toBe('New Value');
+    });
+
+    it('should update reactively when adding a new row', () => {
+      // Set up visible range to include our test data.
+      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
+
+      data.push({ col1: 'C', col2: 3, col3: true });
+      expect(updateCount).toBe(1);
+
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
+
+      // Verify the new row's data.
+      expect(cells['0,2']?.value).toBe('C');
+      expect(cells['1,2']?.value).toBe('3');
+      expect(cells['2,2']?.value).toBe('true');
+    });
+
+    it('should handle combined operations reactively', () => {
+      // Set up visible range.
+      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
+
+      // Multiple operations.
+      data[0].col1 = 'Updated A';
+      data.push({ col1: 'C', col2: 3, col3: true });
+      data.splice(1, 1);
+
+      // We expect one update per operation affecting visible rows.
+      expect(updateCount).toBe(3);
+
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
+
+      // Verify final state.
+      expect(cells['0,0']?.value).toBe('Updated A');
+      expect(cells['0,1']?.value).toBe('C');
+      expect(cells['1,1']?.value).toBe('3');
+      expect(cells['2,1']?.value).toBe('true');
+    });
+  });
+});
+
+class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+  title: S.String,
+  completed: S.Boolean,
+}) {}
+
+const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
+  const schema = createEchoSchema(Test);
+  const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
+  const projection = new ViewProjection(schema, view);
+  const table = create(TableType, { view: makeRef(view) });
+  return new TableModel({ table, projection, ...props });
+};