@dxos/react-ui-table 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

package/src/model/table-model.ts

@@ -4,11 +4,11 @@
 
 import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
 
+import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 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 { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -16,31 +16,53 @@ import {
   type DxGridPlanePosition,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ViewProjection } from '@dxos/schema';
+import { type ViewType, type ViewProjection } from '@dxos/schema';
 
-import { SelectionModel } from './selection-model';
+import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
-import { type TableType } from '../types';
 import { touch } from '../util';
 
-export type BaseTableRow = Record<JsonProp, any> & { id: string };
+// TODO(burdon): Use schema types.
+export type TableRow = Record<JsonProp, any> & { id: string };
 
-export type TableModelProps<T extends BaseTableRow = { id: string }> = {
-  table: TableType;
+export type TableRowAction = {
+  id: string;
+  translationKey: string;
+};
+
+export type TableFeatures = {
+  selection: { enabled: boolean; mode?: SelectionMode };
+  dataEditable: boolean;
+  schemaEditable: boolean;
+};
+
+const defaultFeatures: TableFeatures = {
+  selection: { enabled: true, mode: 'multiple' },
+  dataEditable: false,
+  schemaEditable: false,
+};
+
+export type TableModelProps<T extends TableRow = TableRow> = {
+  id?: string;
+  space?: Space;
+  view?: ViewType;
   projection: ViewProjection;
+  features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
+  rowActions?: TableRowAction[];
   onInsertRow?: (index?: number) => void;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
-  onRowOrderChanged?: () => void;
+  onRowOrderChange?: () => void;
+  onRowAction?: (actionId: string, data: T) => void;
 };
 
-export class TableModel<T extends BaseTableRow = { id: string }> extends Resource {
-  public readonly id = `table-model-${PublicKey.random().truncate()}`;
-
-  private readonly _table: TableType;
+export class TableModel<T extends TableRow = TableRow> extends Resource {
+  private readonly _id: string | undefined;
+  private readonly _space: Space | undefined;
+  private readonly _view: ViewType | undefined;
   private readonly _projection: ViewProjection;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
@@ -52,7 +74,10 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   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 _onRowOrderChange?: TableModelProps<T>['onRowOrderChange'];
+  private readonly _onRowAction?: TableModelProps<T>['onRowAction'];
+  private readonly _rowActions: TableRowAction[];
+  private readonly _features: TableFeatures;
 
   private readonly _rows = signal<T[]>([]);
   private readonly _sorting: TableSorting<T>;
@@ -62,20 +87,36 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    table,
+    id,
+    space,
+    view,
     projection,
+    features = {},
     sorting = [],
     pinnedRows = { top: [], bottom: [] },
+    rowActions = [],
     onCellUpdate,
     onDeleteColumn,
     onDeleteRows,
     onInsertRow,
-    onRowOrderChanged,
+    onRowOrderChange,
+    onRowAction,
   }: TableModelProps<T>) {
     super();
-    this._table = table;
+    this._id = id;
+    this._space = space;
+    this._view = view;
     this._projection = projection;
-    this._sorting = new TableSorting(this._rows, table.view?.target, projection);
+
+    // TODO(ZaymonFC): Use our more robust config merging module?
+    this._features = { ...defaultFeatures, ...features };
+
+    invariant(
+      !(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single'),
+      'Single selection is not compatible with editable tables.',
+    );
+
+    this._sorting = new TableSorting(this._rows, this._view, projection);
 
     if (sorting.length > 0) {
       const [sort] = sorting;
@@ -83,15 +124,25 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
 
     this._pinnedRows = pinnedRows;
+    this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
     this._onDeleteColumn = onDeleteColumn;
     this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChanged = onRowOrderChanged;
+    this._onRowOrderChange = onRowOrderChange;
+    this._onRowAction = onRowAction;
+  }
+
+  public get id() {
+    return this._id;
+  }
+
+  public get space() {
+    return this._space;
   }
 
-  public get table() {
-    return this._table;
+  public get view() {
+    return this._view;
   }
 
   public get projection() {
@@ -102,6 +153,10 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting.sortedRows;
   }
 
+  public get features(): TableFeatures {
+    return this._features;
+  }
+
   /**
    * @reactive
    */
@@ -109,6 +164,17 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting;
   }
 
+  /**
+   * Gets the row data at the specified display index.
+   */
+  public getRowAt(displayIndex: number): T | undefined {
+    if (displayIndex < 0 || displayIndex >= this._sorting.sortedRows.value.length) {
+      return undefined;
+    }
+
+    return this._sorting.sortedRows.value[displayIndex];
+  }
+
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
     return this._pinnedRows;
   }
@@ -127,6 +193,10 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting.isDirty;
   }
 
+  public get rowActions(): TableRowAction[] {
+    return this._rowActions;
+  }
+
   //
   // Initialisation
   //
@@ -134,13 +204,15 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   protected override async _open() {
     this.initializeColumnMeta();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? 'multiple', () =>
+      this._onRowOrderChange?.(),
+    );
     await this._selection.open(this._ctx);
   }
 
   private initializeColumnMeta(): void {
     this._columnMeta = computed(() => {
-      const fields = this._table.view?.target?.fields ?? [];
+      const fields = this._view?.fields ?? [];
       const meta = Object.fromEntries(
         fields.map((field, index: number) => [index, { size: field?.size ?? 256, resizeable: true }]),
       );
@@ -156,7 +228,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private initializeEffects(): void {
     const rowOrderWatcher = effect(() => {
       touch(this._sorting.sortedRows.value);
-      this._onRowOrderChanged?.();
+      this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
 
@@ -172,7 +244,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
         rowEffects.push(
           effect(() => {
             const obj = this._sorting.sortedRows.value[row];
-            this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
+            this._view?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
         );
@@ -193,7 +265,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public getRowCount = (): number => this._rows.value.length;
 
-  public getColumnCount = (): number => this.table.view?.target?.fields.length ?? 0;
+  public getColumnCount = (): number => this._view?.fields.length ?? 0;
 
   public insertRow = (rowIndex?: number): void => {
     const row = rowIndex !== undefined ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
@@ -205,7 +277,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     const obj = this._rows.value[row];
     const objectsToDelete = [];
 
-    if (this._selection.hasSelection.value) {
+    if (this.features.selection.enabled && this._selection.hasSelection.value) {
       const selectedRows = this._selection.getSelectedRows();
       objectsToDelete.push(...selectedRows);
     } else {
@@ -215,8 +287,21 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._onDeleteRows?.(row, objectsToDelete);
   };
 
+  public handleRowAction = (actionId: string, rowIndex: number): void => {
+    if (!this._onRowAction) {
+      return;
+    }
+
+    const row = this._sorting.getDataIndex(rowIndex);
+    const data = this._rows.value[row];
+
+    if (data) {
+      this._onRowAction(actionId, data);
+    }
+  };
+
   public getCellData = ({ col, row }: DxGridPlanePosition): any => {
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return undefined;
     }
@@ -246,7 +331,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
     const rowIdx = this._sorting.getDataIndex(row);
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
     }
@@ -285,7 +370,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
    */
   public updateCellData({ col, row }: DxGridPlanePosition, update: (value: any) => any): void {
     const dataRow = this._sorting.getDataIndex(row);
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     const field = fields[col];
 
     const value = getValue(this._rows.value[dataRow], field.path);
@@ -298,11 +383,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   //
 
   public deleteColumn(fieldId: string): void {
-    if (!this.table.view) {
+    if (!this._view) {
       return;
     }
 
-    const field = this.table.view.target?.fields.find((field) => field.id === fieldId);
+    const field = this._view?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
       this._onDeleteColumn(field.id);
     }
@@ -313,7 +398,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   //
 
   public setColumnWidth(columnIndex: number, width: number): void {
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];

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

@@ -96,7 +96,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 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 projection = new ViewProjection(schema.jsonSchema, view);
   const table = create(TableType, { view: makeRef(view) });
-  return new TableModel({ table, projection, ...props });
+  return new TableModel({ id: table.id, view, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -5,18 +5,19 @@
 import { signal } from '@preact/signals-core';
 
 import { FormatEnum, getValue } from '@dxos/echo-schema';
-import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay } from '@dxos/react-ui-form';
+import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridPlane,
   type DxGridPlaneCells,
-  toPlaneCellIndex,
   type DxGridPlaneRange,
   type DxGridCellValue,
+  toPlaneCellIndex,
 } 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 { type SelectionMode } from './selection-model';
+import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
 /**
@@ -24,7 +25,7 @@ import { tableButtons, tableControls } from '../util';
  * Manages rendering of table cells, headers, selection columns, and action columns across
  * different grid planes.
  */
-export class TablePresentation<T extends BaseTableRow = { id: string }> {
+export class TablePresentation<T extends TableRow = TableRow> {
   constructor(
     private readonly model: TableModel<T>,
     private readonly _visibleRange = signal<DxGridPlaneRange>({
@@ -34,28 +35,44 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   ) {}
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
+    let cells: DxGridPlaneCells;
+
     switch (plane) {
       case 'grid':
         this._visibleRange.value = range;
-        return this.getMainGridCells(range);
+        cells = this.getMainGridCells(range);
+        break;
       case 'frozenRowsStart':
-        return this.getHeaderCells(range);
+        cells = this.getHeaderCells(range);
+        break;
       case 'frozenColsStart':
-        return this.getSelectionColumnCells(range);
+        cells = this.getSelectionColumnCells(range);
+        break;
       case 'frozenColsEnd':
-        return this.getActionColumnCells(range);
+        cells = this.getActionColumnCells(range);
+        break;
       case 'fixedStartStart':
-        return this.getSelectAllCell();
+        cells = this.getSelectAllCell();
+        break;
       case 'fixedStartEnd':
-        return this.getNewColumnCell();
+        cells = this.getNewColumnCell();
+        break;
       default:
-        return {};
+        cells = {};
     }
+
+    if (plane === 'grid' && this.model.features.dataEditable === false) {
+      Object.values(cells).forEach((cell) => {
+        cell.readonly = 'text-select';
+      });
+    }
+
+    return cells;
   }
 
   private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.table.view?.target?.fields ?? [];
+    const fields = this.model.view?.fields ?? [];
 
     const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
       const { props } = this.model.projection.getFieldProjection(field.id);
@@ -69,7 +86,8 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
 
           switch (props.format) {
             case FormatEnum.Boolean:
-            case FormatEnum.SingleSelect: {
+            case FormatEnum.SingleSelect:
+            case FormatEnum.MultiSelect: {
               return '';
             }
             case FormatEnum.Ref: {
@@ -92,7 +110,10 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = cellClassesForRowSelection(
+        this.model.selection.isObjectSelected(obj),
+        this.model.selection.selectionMode,
+      );
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
@@ -117,7 +138,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
           rowIndex: displayIndex,
           checked: value ?? false,
         });
-        cell.readonly = true;
+        cell.readonly = 'no-text-select';
       }
 
       if (props.format === FormatEnum.SingleSelect) {
@@ -131,6 +152,27 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
         }
       }
 
+      if (props.format === FormatEnum.MultiSelect) {
+        const values = getValue(obj, field.path) as string[] | undefined;
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options && values && values.length > 0) {
+          const tags = values
+            .map((value) => {
+              const option = options.find((o) => o.id === value);
+              if (option) {
+                return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+              }
+              return null;
+            })
+            .filter(Boolean)
+            .join(' ');
+
+          if (tags) {
+            cell.accessoryHtml = tags;
+          }
+        }
+      }
+
       const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
       cells[idx] = cell;
     };
@@ -151,7 +193,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.table.view?.target?.fields ?? [];
+    const fields = this.model.view?.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);
       const sorting = this.model.sorting?.sorting;
@@ -177,10 +219,10 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     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);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[toPlaneCellIndex({ col: 0, row })] = {
         value: '',
-        readonly: true,
+        readonly: 'no-text-select',
         className: classes ? mx(classes) : undefined,
         accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
       };
@@ -193,7 +235,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     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);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[toPlaneCellIndex({ col: 0, row })] = {
         value: '',
         readonly: true,
@@ -206,6 +248,16 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   }
 
   private getSelectAllCell(): DxGridPlaneCells {
+    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
+      return {
+        [toPlaneCellIndex({ col: 0, row: 0 })]: {
+          className: '!bg-gridHeader',
+          readonly: true,
+          value: '',
+        },
+      };
+    }
+
     return {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: tableControls.checkbox.render({
@@ -223,9 +275,11 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   private getNewColumnCell(): DxGridPlaneCells {
     return {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        accessoryHtml: tableButtons.addColumn.render({
-          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
-        }),
+        accessoryHtml: this.model.features.schemaEditable
+          ? tableButtons.addColumn.render({
+              disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+            })
+          : undefined,
         className: '!bg-gridHeader',
         readonly: true,
         value: '',
@@ -233,3 +287,21 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     };
   }
 }
+
+export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
+  if (!selected) {
+    if (selectionMode === 'single') {
+      return ['!cursor-pointer'];
+    } else {
+      return undefined;
+    }
+  }
+
+  switch (selectionMode) {
+    case 'single':
+      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
+      return ['!bg-currentRelated hover:bg-hoverSurface', '!cursor-pointer'];
+    case 'multiple':
+      return ['!bg-gridCellSelected'];
+  }
+};

package/src/model/table-sorting.ts

@@ -9,7 +9,7 @@ import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortT
 import { formatForDisplay } from '@dxos/react-ui-form';
 import type { PropertyType, FieldType, ViewProjection, ViewType } from '@dxos/schema';
 
-import { type BaseTableRow } from './table-model';
+import { type TableRow } from './table-model';
 
 /**
  * Represents the local sort state.
@@ -40,7 +40,7 @@ type LocalSort = { type: 'cleared' } | { type: 'active'; sort: FieldSortType } |
  * │ 2: "Cherry"  │  =>  │ 2: "Cherry"  │  =>  │ 2 => 2 │
  * └──────────────┘      └──────────────┘      └────────┘
  */
-export class TableSorting<T extends BaseTableRow> {
+export class TableSorting<T extends TableRow> {
   private readonly _displayToDataIndex = new Map<number, number>();
   private readonly _rows: Signal<T[]>;
   private readonly _localSort = signal<LocalSort>(undefined);
@@ -82,6 +82,7 @@ export class TableSorting<T extends BaseTableRow> {
     if (local?.type === 'active') {
       return local.sort;
     }
+
     return this._view?.query.sort?.[0];
   }
 

package/src/playwright/smoke.spec.ts

@@ -4,12 +4,11 @@
 
 import { expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test-utils/playwright';
+import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
 
-const storyId = 'ui-react-ui-table-table';
-const storyUrl = `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
+const storyUrl = storybookUrl('ui-react-ui-table-table--default');
 
 // NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
 test.describe('Table', () => {

package/src/types/table.ts

@@ -2,21 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Ref, ObjectId, S, TypedObject, Expando } from '@dxos/echo-schema';
+import { EchoObject, Expando, LabelAnnotationId, ObjectId, Ref, S } from '@dxos/echo-schema';
 // import { ThreadType } from '@dxos/plugin-space/types';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = S.Struct({
-  id: ObjectId, // TODO(burdon): Where should this be?
+  id: ObjectId,
   name: S.optional(S.String),
   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(Expando /* ThreadType */))), // TODO(dmaretskyi): Breaks edge because plugin-space depends on react-client.
+  // TODO(burdon): Document why threads is included here?
+  threads: S.optional(S.Array(Ref(Expando /* ThreadType */))),
+}).annotations({
+  // TODO(burdon): Move annotation to property.
+  [LabelAnnotationId]: 'name',
 });
 
-// type TableType = S.Schema.Type<typeof TableSchema>;
-
-export class TableType extends TypedObject({
-  typename: 'dxos.org/type/Table',
-  version: '0.1.0',
-})(TableSchema.fields) {}
+export const TableType = TableSchema.pipe(EchoObject({ typename: 'dxos.org/type/Table', version: '0.1.0' }));
+export interface TableType extends S.Schema.Type<typeof TableType> {}