@dxos/react-ui-table 0.8.4-main.3c1ae3b → 0.8.4-main.3fbcb4aa9b

package/src/model/modal-controller.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type MutableRefObject, type RefObject } from 'react';
 
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
@@ -15,13 +15,23 @@ export type ModalState =
   | { type: 'closed' };
 
 export class ModalController {
-  private readonly _state = signal<ModalState>({ type: 'closed' });
+  private readonly _registry: Registry.Registry;
+  private readonly _state: Atom.Writable<ModalState>;
   private readonly _triggerRef: MutableRefObject<HTMLElement> = { current: null as unknown as HTMLElement };
 
-  public get state() {
+  constructor(registry: Registry.Registry) {
+    this._registry = registry;
+    this._state = Atom.make<ModalState>({ type: 'closed' });
+  }
+
+  public get state(): Atom.Atom<ModalState> {
     return this._state;
   }
 
+  public get stateValue(): ModalState {
+    return this._registry.get(this._state);
+  }
+
   public get trigger() {
     return this._triggerRef as RefObject<HTMLButtonElement>;
   }
@@ -31,35 +41,36 @@ export class ModalController {
   };
 
   public showRowMenu = (rowIndex: number) => {
-    this._state.value = { type: 'row', rowIndex };
+    this._registry.set(this._state, { type: 'row', rowIndex });
   };
 
   public showColumnMenu = (fieldId: string) => {
-    this._state.value = { type: 'column', fieldId };
+    this._registry.set(this._state, { type: 'column', fieldId });
   };
 
   public showColumnCreator = () => {
-    this._state.value = { type: 'columnSettings', mode: { type: 'create' } };
+    this._registry.set(this._state, { type: 'columnSettings', mode: { type: 'create' } });
   };
 
   public showReferencePanel = (targetId: string, schemaId: string) => {
-    this._state.value = { type: 'refPanel', targetId, typename: schemaId };
+    this._registry.set(this._state, { type: 'refPanel', targetId, typename: schemaId });
   };
 
   public openColumnSettings = () => {
-    if (this._state.value.type === 'column') {
-      const fieldId = this._state.value.fieldId;
+    const currentState = this._registry.get(this._state);
+    if (currentState.type === 'column') {
+      const fieldId = currentState.fieldId;
       // Queue next render to let the column action modal close completely.
       requestAnimationFrame(() => {
-        this._state.value = {
+        this._registry.set(this._state, {
           type: 'columnSettings',
           mode: { type: 'edit', fieldId },
-        };
+        });
       });
     }
   };
 
   public close = () => {
-    this._state.value = { type: 'closed' };
+    this._registry.set(this._state, { type: 'closed' });
   };
 }

package/src/model/selection-model.ts

@@ -2,90 +2,120 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type ReadonlySignal, type Signal, computed, effect, signal } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 
 import { Resource } from '@dxos/context';
 
-import { touch } from '../util';
-
 import { type TableRow } from './table-model';
 
 export type SelectionMode = 'single' | 'multiple';
 
 export class SelectionModel<T extends TableRow> extends Resource {
-  private readonly _selection: Signal<Set<string>>;
+  private readonly _registry: Registry.Registry;
+  private readonly _rows: Atom.Atom<T[]>;
+  private readonly _selection: Atom.Writable<Set<string>>;
+  private readonly _validSelectedIds: Atom.Atom<Set<string>>;
+  private readonly _hasSelection: Atom.Atom<boolean>;
+  private readonly _allSelected: Atom.Atom<boolean>;
+  private readonly _selectionMode: SelectionMode;
+  private readonly _onSelectionChanged?: () => void;
 
-  private readonly _validSelectedIds = computed<Set<string>>(() => {
-    const rows = this._rows.value;
-    if (!rows) {
-      return new Set<string>();
-    }
+  constructor(
+    registry: Registry.Registry,
+    rows: Atom.Atom<T[]>,
+    selectionMode: SelectionMode,
+    initialSelection: string[],
+    onSelectionChanged?: () => void,
+  ) {
+    super();
+    this._registry = registry;
+    this._rows = rows;
+    this._selectionMode = selectionMode;
+    this._onSelectionChanged = onSelectionChanged;
 
-    const validIds = new Set(rows.map((row) => row.id));
-    return new Set([...this._selection.value].filter((id) => validIds.has(id)));
-  });
+    this._selection = Atom.make<Set<string>>(new Set(initialSelection));
 
-  private readonly _hasSelection = computed<boolean>(() => this._validSelectedIds.value.size > 0);
+    this._validSelectedIds = Atom.make((get) => {
+      const rows = get(this._rows);
+      if (!rows) {
+        return new Set<string>();
+      }
 
-  private readonly _allSelected = computed<boolean>(() => {
-    const rows = this._rows.value;
-    if (rows.length === 0) {
-      return false;
-    }
+      const validIds = new Set(rows.map((row) => row.id));
+      const selection = get(this._selection);
+      return new Set([...selection].filter((id) => validIds.has(id)));
+    });
 
-    return rows.every((row) => this._selection.value.has(row.id));
-  });
+    this._hasSelection = Atom.make((get) => get(this._validSelectedIds).size > 0);
 
-  constructor(
-    private readonly _rows: ReadonlySignal<T[]>,
-    private readonly _selectionMode: SelectionMode,
-    private readonly _initialSelection: string[],
-    private readonly _onSelectionChanged?: () => void,
-  ) {
-    super();
-    this._selection = signal(new Set(this._initialSelection));
+    this._allSelected = Atom.make((get) => {
+      const rows = get(this._rows);
+      if (rows.length === 0) {
+        return false;
+      }
+
+      const selection = get(this._selection);
+      return rows.every((row) => selection.has(row.id));
+    });
   }
 
   protected override async _open(): Promise<void> {
-    const selectionWatcher = effect(() => {
-      touch(this._selection.value);
+    const selectionUnsubscribe = this._registry.subscribe(this._selection, () => {
       this._onSelectionChanged?.();
     });
-    this._ctx.onDispose(selectionWatcher);
+    this._ctx.onDispose(selectionUnsubscribe);
   }
 
   //
   // Getters
   //
 
-  public get selection(): ReadonlySignal<Set<string>> {
+  /** Get the selection atom for reactive access. */
+  public get selectionAtom(): Atom.Atom<Set<string>> {
     return this._selection;
   }
 
-  public get hasSelection(): ReadonlySignal<boolean> {
+  /** Get the current selection value. */
+  public get selection(): Set<string> {
+    return this._registry.get(this._selection);
+  }
+
+  /** Get the hasSelection atom for reactive access. */
+  public get hasSelectionAtom(): Atom.Atom<boolean> {
     return this._hasSelection;
   }
 
-  public get allRowsSeleted(): ReadonlySignal<boolean> {
+  /** Check if there is any selection. */
+  public get hasSelection(): boolean {
+    return this._registry.get(this._hasSelection);
+  }
+
+  /** Get the allRowsSelected atom for reactive access. */
+  public get allRowsSelectedAtom(): Atom.Atom<boolean> {
     return this._allSelected;
   }
 
+  /** Check if all rows are selected. */
+  public get allRowsSelected(): boolean {
+    return this._registry.get(this._allSelected);
+  }
+
   public get selectionMode(): SelectionMode {
     return this._selectionMode;
   }
 
   public getSelectedRows = (): T[] => {
-    const selectedIds = this._validSelectedIds.value;
-    return this._rows.value.filter((row) => selectedIds.has(row.id));
+    const selectedIds = this._registry.get(this._validSelectedIds);
+    return this._registry.get(this._rows).filter((row) => selectedIds.has(row.id));
   };
 
   public isRowIndexSelected = (rowIndex: number): boolean => {
-    const row = this._rows.value[rowIndex];
-    return this._selection.value.has(row.id);
+    const row = this._registry.get(this._rows)[rowIndex];
+    return this._registry.get(this._selection).has(row.id);
   };
 
   public isObjectSelected = (object: T): boolean => {
-    return this._selection.value.has(object.id);
+    return this._registry.get(this._selection).has(object.id);
   };
 
   //
@@ -93,8 +123,9 @@ export class SelectionModel<T extends TableRow> extends Resource {
   //
 
   public toggleSelectionForRowIndex = (rowIndex: number): void => {
-    const row = this._rows.value[rowIndex];
-    const newSelection = new Set(this._selection.value);
+    const row = this._registry.get(this._rows)[rowIndex];
+    const currentSelection = this._registry.get(this._selection);
+    const newSelection = new Set(currentSelection);
 
     if (newSelection.has(row.id)) {
       newSelection.delete(row.id);
@@ -105,17 +136,17 @@ export class SelectionModel<T extends TableRow> extends Resource {
       newSelection.add(row.id);
     }
 
-    this._selection.value = newSelection;
+    this._registry.set(this._selection, newSelection);
   };
 
   public setSelection = (mode: 'all' | 'none'): void => {
     switch (mode) {
       case 'all': {
-        this._selection.value = new Set(this._rows.value.map((row) => row.id));
+        this._registry.set(this._selection, new Set(this._registry.get(this._rows).map((row) => row.id)));
         break;
       }
       case 'none': {
-        this._selection.value = new Set();
+        this._registry.set(this._selection, new Set());
         break;
       }
     }

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

@@ -2,34 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed } from '@preact/signals-core';
+import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
-import { Filter, Query } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo/internal';
-import { updateCounter } from '@dxos/echo/testing';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
-import { registerSignalsRuntime } from '@dxos/echo-signals';
-import { live } from '@dxos/live-object';
-import { ProjectionModel, View } from '@dxos/schema';
+import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
-
-import { TableModel, type TableModelProps } from './table-model';
+import {
+  TableModel,
+  type TableModelProps,
+  createDirectChangeCallback as createTableDirectChangeCallback,
+} from './table-model';
 
 // TODO(burdon): Tests are disabled in project.json since they bring in plugin deps.
 //  Restore once factored out into react-ui-table.
 
-registerSignalsRuntime();
-
 describe('TableModel', () => {
   let updateCount = 0;
   let model: any;
+  let registry: Registry.Registry;
 
   beforeEach(async () => {
     updateCount = 0;
-    model = createTableModel({
+    registry = Registry.make();
+    model = createTableModel(registry, {
       onCellUpdate: () => updateCount++,
     });
     await model.open();
@@ -45,78 +44,106 @@ describe('TableModel', () => {
   });
 
   describe('methods', () => {
-    it('should pin a row', () => {
+    test('should pin a row', () => {
       model.pinRow(1, 'top');
       expect(model.pinnedRows.top).toContain(1);
     });
 
-    it('should unpin a row', () => {
+    test('should unpin a row', () => {
       model.pinRow(1, 'top');
       model.unpinRow(1);
       expect(model.pinnedRows.top).not.toContain(1);
     });
 
-    it('should toggle row selection', () => {
+    test('should toggle row selection', () => {
       model.selection.toggleSelectionForRowIndex(2);
-      expect(model.selection.hasSelection.value).toBe(true);
+      expect(model.selection.hasSelection).toBe(true);
     });
 
-    it('should deselect a row', () => {
+    test('should deselect a row', () => {
       model.selection.toggleSelectionForRowIndex(2);
       model.selection.toggleSelectionForRowIndex(2);
-      expect(model.selection.hasSelection.value).toBe(false);
+      expect(model.selection.hasSelection).toBe(false);
     });
 
-    it('should bulk select rows', () => {
+    test('should bulk select rows', () => {
       model.selection.setSelection('all');
-      expect(model.selection.allRowsSeleted.value).toBe(true);
+      expect(model.selection.allRowsSelected).toBe(true);
       model.selection.setSelection('none');
-      expect(model.selection.hasSelection.value).toBe(false);
+      expect(model.selection.hasSelection).toBe(false);
     });
   });
 
   describe('reactivity', () => {
-    it('pure signals should nest', () => {
-      const signal$ = live({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
-      const computed$ = computed(() => {
-        return signal$.arr.map((row) =>
-          computed(() => {
-            return row.thingInside;
-          }),
-        );
-      });
-
-      using outerCounter = updateCounter(() => {
-        computed$.value.map((c) => c.value);
-      });
-
-      using innerCounter = updateCounter(() => {
-        computed$.value[0].value;
-      });
-
-      expect(computed$.value.map((v) => v.value)).toEqual([1, 2]);
-
-      signal$.arr[0].thingInside = 3;
-
-      expect(computed$.value.map((v) => v.value)).toEqual([3, 2]);
-      expect(outerCounter.count).toBe(1);
-      expect(innerCounter.count).toBe(1);
+    test('rows should update when setRows is called', () => {
+      model.setRows([{ id: '4', title: 'Test 4', completed: false }]);
+      expect(model.getRows()).toHaveLength(1);
+      expect(model.getRows()[0].id).toBe('4');
+
+      model.setRows([
+        { id: '5', title: 'Test 5', completed: false },
+        { id: '6', title: 'Test 6', completed: true },
+      ]);
+      expect(model.getRows()).toHaveLength(2);
+      expect(model.getRows()[0].id).toBe('5');
+      expect(model.getRows()[1].id).toBe('6');
+    });
+
+    test('selection should update when toggled', () => {
+      model.selection.toggleSelectionForRowIndex(0);
+      expect(model.selection.hasSelection).toBe(true);
+      expect(model.selection.selection.size).toBe(1);
+
+      model.selection.toggleSelectionForRowIndex(0);
+      expect(model.selection.hasSelection).toBe(false);
+      expect(model.selection.selection.size).toBe(0);
+    });
+
+    test('derived atoms should reflect current state', () => {
+      // Set initial rows.
+      model.setRows([
+        { id: '1', title: 'Zebra', completed: false },
+        { id: '2', title: 'Apple', completed: true },
+        { id: '3', title: 'Mango', completed: false },
+      ]);
+
+      // Verify rows are accessible.
+      const rows = model.getRows();
+      expect(rows).toHaveLength(3);
+      expect(rows[0].id).toBeDefined();
     });
   });
 });
 
-class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+const Test = Schema.Struct({
   title: Schema.String,
   completed: Schema.Boolean,
-}) {}
-
-const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
+}).pipe(
+  Type.object({
+    typename: 'com.example.type.test',
+    version: '0.1.0',
+  }),
+);
+
+const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
   });
   const object = Table.make({ view });
-  const projection = new ProjectionModel(schema.jsonSchema, view.projection);
-  return new TableModel({ object, projection, ...props });
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: schema.jsonSchema,
+    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(schema)),
+  });
+  projection.normalizeView();
+  return new TableModel({
+    registry,
+    object,
+    projection,
+    change: createTableDirectChangeCallback(object),
+    ...props,
+  });
 };