@dxos/react-ui-table 0.7.4 → 0.7.5-main.9d26e3a

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 });
+};

package/src/model/table-presentation.ts

@@ -0,0 +1,214 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { signal } from '@preact/signals-core';
+
+import { FormatEnum, getValue } from '@dxos/echo-schema';
+import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay } from '@dxos/react-ui-form';
+import {
+  type DxGridPlane,
+  type DxGridPlaneCells,
+  toPlaneCellIndex,
+  type DxGridPlaneRange,
+  type DxGridCellValue,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+
+import { type BaseTableRow, type TableModel } from './table-model';
+import { tableButtons, tableControls } from '../util';
+
+/**
+ * Presentation layer for a table component, handling cell rendering and grid display logic.
+ * Manages rendering of table cells, headers, selection columns, and action columns across
+ * different grid planes.
+ */
+export class TablePresentation<T extends BaseTableRow = { id: string }> {
+  constructor(
+    private readonly model: TableModel<T>,
+    private readonly _visibleRange = signal<DxGridPlaneRange>({
+      start: { row: 0, col: 0 },
+      end: { row: 0, col: 0 },
+    }),
+  ) {}
+
+  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.model.table.view?.target?.fields ?? [];
+
+    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
+      const { props } = this.model.projection.getFieldProjection(field.id);
+
+      const cell: DxGridCellValue = {
+        get value() {
+          const value = getValue(obj, field.path);
+          if (value == null) {
+            return '';
+          }
+
+          switch (props.format) {
+            case FormatEnum.Boolean: {
+              return '';
+            }
+            case FormatEnum.Ref: {
+              if (!field.referencePath) {
+                return ''; // TODO(burdon): Show error.
+              }
+
+              return getValue(value.target, 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.model.selection.isObjectSelected(obj));
+      if (rowSelectionClasses) {
+        classes.push(rowSelectionClasses);
+      }
+      if (classes.length > 0) {
+        cell.className = mx(classes.flat());
+      }
+
+      if (props.format === FormatEnum.Ref && props.referenceSchema) {
+        const targetObj = getValue(obj, field.path)?.target;
+        if (targetObj) {
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id as any as string,
+            schemaId: props.referenceSchema,
+          });
+        }
+      }
+
+      if (props.format === FormatEnum.Boolean) {
+        const value = getValue(obj, field.path);
+        cell.accessoryHtml = tableControls.switch.render({
+          colIndex,
+          rowIndex: displayIndex,
+          checked: value ?? false,
+        });
+        cell.readonly = true;
+      }
+
+      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
+      cells[idx] = cell;
+    };
+
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const field = fields[col];
+        if (!field) {
+          continue;
+        }
+
+        addCell(this.model.rows.value[row], field, col, row);
+      }
+    }
+
+    return cells;
+  }
+
+  private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.table.view?.target?.fields ?? [];
+    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+      const { field, props } = this.model.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.model.getRowCount(); row++) {
+      const isSelected = this.model.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.model.getRowCount(); row++) {
+      const isSelected = this.model.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.model.selection.allRowsSeleted.value,
+        }),
+        readonly: true,
+      },
+    };
+  }
+
+  private getNewColumnCell(): DxGridPlaneCells {
+    return {
+      [toPlaneCellIndex({ col: 0, row: 0 })]: {
+        value: '',
+        accessoryHtml: tableButtons.addColumn.render({
+          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+        }),
+        readonly: true,
+      },
+    };
+  }
+}

package/src/playwright/TableManager.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Page } from '@playwright/test';
+import { type Locator, type Page } from '@playwright/test';
 
 import { DxGridManager } from '@dxos/lit-grid/testing';
 
@@ -44,6 +44,10 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.selection).nth(0).click();
   }
 
+  public selection(index: number): Locator {
+    return this.page.getByTestId(TABLE_SELECTORS.selection).nth(index + 1);
+  }
+
   public async sortColumn(index: number, direction: 'ascending' | 'descending'): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.columnSettingsButton).nth(index).click();
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();

package/src/playwright/smoke.spec.ts

@@ -38,6 +38,26 @@ test.describe('Table', () => {
     await page.close();
   });
 
+  test('selection', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    // Select All
+    await table.toggleSelectAll();
+    await expect(table.selection(0)).toBeChecked();
+    await expect(table.selection(1)).toBeChecked();
+    await expect(table.selection(2)).toBeChecked();
+
+    // Deselect All
+    await table.toggleSelectAll();
+    await expect(table.selection(0)).not.toBeChecked();
+    await expect(table.selection(1)).not.toBeChecked();
+    await expect(table.selection(2)).not.toBeChecked();
+
+    await page.close();
+  });
+
   test('delete row', async ({ browser }) => {
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
@@ -69,6 +89,9 @@ test.describe('Table', () => {
     const table = new TableManager(page);
 
     await table.grid.ready();
+    await table.deleteColumn(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(40);
+
     await table.deleteColumn(0);
     await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(30);
 
@@ -85,7 +108,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow
+  // Rest of add column test remains the same as it's a more complex flow.
+  // TODO(ZaymonFC): Restore this after fixing format selection.
   test('add column', async ({ browser }) => {
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
@@ -98,4 +122,58 @@ test.describe('Table', () => {
     await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();
   });
+
+  test('reference > reference / create new object', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    // Reference existing object.
+    // Scroll over to the manager column.
+    await table.grid.panByWheel(10000, 0);
+
+    await table.grid.cell(4, 0, 'grid').click();
+    await page.keyboard.press('A');
+    await page.keyboard.press('N');
+    await page.getByRole('option', { name: 'Anita Mayer' }).click();
+
+    // Assert that the value is shown in the cell.
+    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toBeVisible();
+
+    // Create new object.
+    await table.grid.cell(4, 1, 'grid').click();
+    await page.keyboard.type('t');
+    await page.keyboard.type('e');
+    await page.keyboard.type('s');
+    await page.keyboard.type('t');
+    await page.getByText('Create new object', { exact: false }).click();
+    await page.getByTestId('save-button').click();
+
+    // Scroll to the left.
+    await page.getByRole('gridcell', { name: 'test' }).click();
+
+    await page.close();
+  });
+
+  test('test toggles', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    await page.getByTestId('table-switch').first().click();
+    await page.getByTestId('table-switch').nth(7).click();
+
+    // Test that checks are durable in the data model by sorting.
+    await table.sortColumn(1, 'descending');
+
+    // Assert the first two switch checkboxes are checked.
+    await expect(page.getByTestId('table-switch').first()).toBeChecked();
+    await expect(page.getByTestId('table-switch').nth(1)).toBeChecked();
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Anita Mayer');
+    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Uwe Øvergård');
+
+    await page.close();
+  });
 });

package/src/types/table.ts

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';
+import { Ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';
 import { ThreadType } from '@dxos/plugin-space';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = S.Struct({
   id: ObjectId, // TODO(burdon): Where should this be?
   name: S.optional(S.String),
-  view: S.optional(ref(ViewType)),
+  view: S.optional(Ref(ViewType)),
   // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.
-  threads: S.optional(S.Array(ref(ThreadType))),
+  threads: S.optional(S.Array(Ref(ThreadType))),
 });
 
 // type TableType = S.Schema.Type<typeof TableSchema>;

package/src/util/index.ts

@@ -5,3 +5,4 @@
 export * from './signals';
 export * from './table';
 export * from './table-buttons';
+export * from './table-controls';

package/src/util/table-buttons.ts

@@ -2,69 +2,118 @@
 // Copyright 2024 DXOS.org
 //
 
-type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell';
 
-// TODO(thure): Lots of copy-pasted business here, this could by DRYed out substantially.
-
-// TODO(thure): These unique attributes come with more caveats than e.g. applying multiple attributes – one key-value
-//  pair for identifying the button type and another for passing the fieldId.
-
-const TABLE_ATTRS: { [K in TableButton]: string } = {
-  referencedCell: 'data-table-ref-cell-button',
+export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
-  rowMenu: 'data-table-row-menu-button',
   newColumn: 'data-table-new-column-button',
+  referencedCell: 'data-table-ref-cell-button',
+  rowMenu: 'data-table-row-menu-button',
 } as const;
 
-const ICONS: { [K in TableButton]: string } = {
-  referencedCell: 'ph--link-simple-horizontal--regular',
-  columnSettings: 'ph--caret-down--regular',
-  rowMenu: 'ph--dots-three--regular',
-  newColumn: 'ph--plus--regular',
-} as const;
+type ButtonData =
+  | { type: 'columnSettings'; fieldId: string }
+  | { type: 'newColumn'; disabled?: boolean }
+  | { type: 'referencedCell'; schemaId: string; targetId: string }
+  | { type: 'rowMenu'; rowIndex: number };
 
-const createButtonHtml = ({
-  button,
-  value = '',
+const createButton = ({
+  attr,
+  data,
   disabled = false,
+  icon,
   testId,
 }: {
-  button: TableButton;
-  value?: string;
+  attr: string;
+  data: Record<string, string>;
   disabled?: boolean;
+  icon: string;
   testId: string;
-}): string => {
-  const buttonClasses = 'ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2' as const;
-  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+}) => {
+  const dataAttrs = Object.entries(data)
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(' ');
+
+  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
-export const tableButtons = {
-  referencedCell: {
-    attr: TABLE_ATTRS.referencedCell,
-    icon: ICONS.referencedCell,
-    render: ({ targetId, schemaId }: { targetId: string; schemaId: string }) =>
-      createButtonHtml({
-        button: 'referencedCell',
-        value: `${schemaId}#${targetId}`,
-        testId: 'table-ref-cell-button',
-      }),
+const addColumnButton = {
+  attr: BUTTON_IDENTIFIERS.newColumn,
+  icon: 'ph--plus--regular',
+  render: ({ disabled }: Omit<Extract<ButtonData, { type: 'newColumn' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.newColumn,
+      icon: addColumnButton.icon,
+      disabled,
+      data: {},
+      testId: 'table-new-column-button',
+    });
   },
-  columnSettings: {
-    attr: TABLE_ATTRS.columnSettings,
-    icon: ICONS.columnSettings,
-    render: ({ fieldId }: { fieldId: string }) =>
-      createButtonHtml({ button: 'columnSettings', value: fieldId, testId: 'table-column-settings-button' }),
+  getData: (_el: HTMLElement): Extract<ButtonData, { type: 'newColumn' }> => ({ type: 'newColumn' }),
+} as const;
+
+const columnSettingsButton = {
+  attr: BUTTON_IDENTIFIERS.columnSettings,
+  icon: 'ph--caret-down--regular',
+  render: ({ fieldId }: Omit<Extract<ButtonData, { type: 'columnSettings' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.columnSettings,
+      icon: columnSettingsButton.icon,
+      data: {
+        'data-field-id': fieldId,
+      },
+      testId: 'table-column-settings-button',
+    });
   },
-  rowMenu: {
-    attr: TABLE_ATTRS.rowMenu,
-    icon: ICONS.rowMenu,
-    render: ({ rowIndex }: { rowIndex: number }) =>
-      createButtonHtml({ button: 'rowMenu', value: rowIndex.toString(), testId: 'table-row-menu-button' }),
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'columnSettings' }> => ({
+    type: 'columnSettings',
+    fieldId: el.getAttribute('data-field-id')!,
+  }),
+} as const;
+
+const referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: 'ph--link-simple-horizontal--regular',
+  render: ({ targetId, schemaId }: Omit<Extract<ButtonData, { type: 'referencedCell' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        'data-target-id': targetId,
+        'data-schema-id': schemaId,
+      },
+      testId: 'table-ref-cell-button',
+    });
   },
-  addColumn: {
-    attr: TABLE_ATTRS.newColumn,
-    icon: ICONS.newColumn,
-    render: ({ disabled }: { disabled?: boolean } = {}) =>
-      createButtonHtml({ button: 'newColumn', disabled, testId: 'table-new-column-button' }),
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'referencedCell' }> => ({
+    type: 'referencedCell',
+    targetId: el.getAttribute('data-target-id')!,
+    schemaId: el.getAttribute('data-schema-id')!,
+  }),
+} as const;
+
+const rowMenuButton = {
+  attr: BUTTON_IDENTIFIERS.rowMenu,
+  icon: 'ph--dots-three--regular',
+  render: ({ rowIndex }: Omit<Extract<ButtonData, { type: 'rowMenu' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.rowMenu,
+      icon: rowMenuButton.icon,
+      data: {
+        'data-row-index': rowIndex.toString(),
+      },
+      testId: 'table-row-menu-button',
+    });
   },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'rowMenu' }> => ({
+    type: 'rowMenu',
+    rowIndex: Number(el.getAttribute('data-row-index')!),
+  }),
+} as const;
+
+export const tableButtons = {
+  addColumn: addColumnButton,
+  columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
+  rowMenu: rowMenuButton,
 } as const;