@dxos/app-graph 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/src/graph.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Registry, Rx } from '@effect-rx/rx-react';
+import { Atom, Registry } from '@effect-atom/atom-react';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
 import * as Record from 'effect/Record';
@@ -16,7 +16,9 @@ import { type MakeOptional, isNonNullable } from '@dxos/util';
 import { type Action, type ActionGroup, type Node, type NodeArg, type Relation } from './node';
 
 const graphSymbol = Symbol('graph');
-type DeepWriteable<T> = { -readonly [K in keyof T]: T[K] extends object ? DeepWriteable<T[K]> : T[K] };
+type DeepWriteable<T> = {
+  -readonly [K in keyof T]: T[K] extends object ? DeepWriteable<T[K]> : T[K];
+};
 type NodeInternal = DeepWriteable<Node> & { [graphSymbol]: Graph };
 
 /**
@@ -79,32 +81,32 @@ export interface ReadableGraph {
    */
   toJSON(id?: string): object;
 
-  json(id?: string): Rx.Rx<any>;
+  json(id?: string): Atom.Atom<any>;
 
   /**
-   * Get the rx key for the node with the given id.
+   * Get the atom key for the node with the given id.
    */
-  node(id: string): Rx.Rx<Option.Option<Node>>;
+  node(id: string): Atom.Atom<Option.Option<Node>>;
 
   /**
-   * Get the rx key for the node with the given id.
+   * Get the atom key for the node with the given id.
    */
-  nodeOrThrow(id: string): Rx.Rx<Node>;
+  nodeOrThrow(id: string): Atom.Atom<Node>;
 
   /**
-   * Get the rx key for the connections of the node with the given id.
+   * Get the atom key for the connections of the node with the given id.
    */
-  connections(id: string, relation?: Relation): Rx.Rx<Node[]>;
+  connections(id: string, relation?: Relation): Atom.Atom<Node[]>;
 
   /**
-   * Get the rx key for the actions of the node with the given id.
+   * Get the atom key for the actions of the node with the given id.
    */
-  actions(id: string): Rx.Rx<(Action | ActionGroup)[]>;
+  actions(id: string): Atom.Atom<(Action | ActionGroup)[]>;
 
   /**
-   * Get the rx key for the edges of the node with the given id.
+   * Get the atom key for the edges of the node with the given id.
    */
-  edges(id: string): Rx.Rx<Edges>;
+  edges(id: string): Atom.Atom<Edges>;
 
   /**
    * Alias for `getNodeOrThrow(ROOT_ID)`.
@@ -228,7 +230,10 @@ export interface WritableGraph extends ExpandableGraph {
  * The Graph represents the user interface information architecture of the application constructed via plugins.
  */
 export class Graph implements WritableGraph {
-  readonly onNodeChanged = new Event<{ id: string; node: Option.Option<Node> }>();
+  readonly onNodeChanged = new Event<{
+    id: string;
+    node: Option.Option<Node>;
+  }>();
 
   private readonly _onExpand?: (id: string, relation: Relation) => void;
   private readonly _onInitialize?: (id: string) => Promise<void>;
@@ -239,51 +244,59 @@ export class Graph implements WritableGraph {
   private readonly _initialized = Record.empty<string, boolean>();
   private readonly _initialEdges = Record.empty<string, Edges>();
   private readonly _initialNodes = Record.fromEntries([
-    [ROOT_ID, this._constructNode({ id: ROOT_ID, type: ROOT_TYPE, data: null, properties: {} })],
+    [
+      ROOT_ID,
+      this._constructNode({
+        id: ROOT_ID,
+        type: ROOT_TYPE,
+        data: null,
+        properties: {},
+      }),
+    ],
   ]);
 
   /** @internal */
-  readonly _node = Rx.family<string, Rx.Writable<Option.Option<Node>>>((id) => {
+  readonly _node = Atom.family<string, Atom.Writable<Option.Option<Node>>>((id) => {
     const initial = Option.flatten(Record.get(this._initialNodes, id));
-    return Rx.make<Option.Option<Node>>(initial).pipe(Rx.keepAlive, Rx.withLabel(`graph:node:${id}`));
+    return Atom.make<Option.Option<Node>>(initial).pipe(Atom.keepAlive, Atom.withLabel(`graph:node:${id}`));
   });
 
-  private readonly _nodeOrThrow = Rx.family<string, Rx.Rx<Node>>((id) => {
-    return Rx.make((get) => {
+  private readonly _nodeOrThrow = Atom.family<string, Atom.Atom<Node>>((id) => {
+    return Atom.make((get) => {
       const node = get(this._node(id));
       invariant(Option.isSome(node), `Node not available: ${id}`);
       return node.value;
     });
   });
 
-  private readonly _edges = Rx.family<string, Rx.Writable<Edges>>((id) => {
+  private readonly _edges = Atom.family<string, Atom.Writable<Edges>>((id) => {
     const initial = Record.get(this._initialEdges, id).pipe(Option.getOrElse(() => ({ inbound: [], outbound: [] })));
-    return Rx.make<Edges>(initial).pipe(Rx.keepAlive, Rx.withLabel(`graph:edges:${id}`));
+    return Atom.make<Edges>(initial).pipe(Atom.keepAlive, Atom.withLabel(`graph:edges:${id}`));
   });
 
-  // NOTE: Currently the argument to the family needs to be referentially stable for the rx to be referentially stable.
-  // TODO(wittjosiah): Rx feature request, support for something akin to `ComplexMap` to allow for complex arguments.
-  private readonly _connections = Rx.family<string, Rx.Rx<Node[]>>((key) => {
-    return Rx.make((get) => {
+  // NOTE: Currently the argument to the family needs to be referentially stable for the atom to be referentially stable.
+  // TODO(wittjosiah): Atom feature request, support for something akin to `ComplexMap` to allow for complex arguments.
+  private readonly _connections = Atom.family<string, Atom.Atom<Node[]>>((key) => {
+    return Atom.make((get) => {
       const [id, relation] = key.split('$');
       const edges = get(this._edges(id));
       return edges[relation as Relation]
         .map((id) => get(this._node(id)))
         .filter(Option.isSome)
         .map((o) => o.value);
-    }).pipe(Rx.withLabel(`graph:connections:${key}`));
+    }).pipe(Atom.withLabel(`graph:connections:${key}`));
   });
 
-  private readonly _actions = Rx.family<string, Rx.Rx<(Action | ActionGroup)[]>>((id) => {
-    return Rx.make((get) => {
+  private readonly _actions = Atom.family<string, Atom.Atom<(Action | ActionGroup)[]>>((id) => {
+    return Atom.make((get) => {
       return get(this._connections(`${id}$outbound`)).filter(
         (node) => node.type === ACTION_TYPE || node.type === ACTION_GROUP_TYPE,
       );
-    }).pipe(Rx.withLabel(`graph:actions:${id}`));
+    }).pipe(Atom.withLabel(`graph:actions:${id}`));
   });
 
-  private readonly _json = Rx.family<string, Rx.Rx<any>>((id) => {
-    return Rx.make((get) => {
+  private readonly _json = Atom.family<string, Atom.Atom<any>>((id) => {
+    return Atom.make((get) => {
       const toJSON = (node: Node, seen: string[] = []): any => {
         const nodes = get(this.connections(node.id));
         const obj: Record<string, any> = {
@@ -307,7 +320,7 @@ export class Graph implements WritableGraph {
 
       const root = get(this.nodeOrThrow(id));
       return toJSON(root);
-    }).pipe(Rx.withLabel(`graph:json:${id}`));
+    }).pipe(Atom.withLabel(`graph:json:${id}`));
   });
 
   constructor({ registry, nodes, edges, onInitialize, onExpand, onRemoveNode }: GraphParams = {}) {
@@ -337,15 +350,15 @@ export class Graph implements WritableGraph {
     return this._json(id);
   }
 
-  node(id: string): Rx.Rx<Option.Option<Node>> {
+  node(id: string): Atom.Atom<Option.Option<Node>> {
     return this._node(id);
   }
 
-  nodeOrThrow(id: string): Rx.Rx<Node> {
+  nodeOrThrow(id: string): Atom.Atom<Node> {
     return this._nodeOrThrow(id);
   }
 
-  connections(id: string, relation: Relation = 'outbound'): Rx.Rx<Node[]> {
+  connections(id: string, relation: Relation = 'outbound'): Atom.Atom<Node[]> {
     return this._connections(`${id}$${relation}`);
   }
 
@@ -353,7 +366,7 @@ export class Graph implements WritableGraph {
     return this._actions(id);
   }
 
-  edges(id: string): Rx.Rx<Edges> {
+  edges(id: string): Atom.Atom<Edges> {
     return this._edges(id);
   }
 
@@ -401,7 +414,7 @@ export class Graph implements WritableGraph {
   }
 
   addNodes(nodes: NodeArg<any, Record<string, any>>[]): void {
-    Rx.batch(() => {
+    Atom.batch(() => {
       nodes.map((node) => this.addNode(node));
     });
   }
@@ -415,10 +428,20 @@ export class Graph implements WritableGraph {
         const typeChanged = node.type !== type;
         const dataChanged = node.data !== data;
         const propertiesChanged = Object.keys(properties).some((key) => node.properties[key] !== properties[key]);
-        log('existing node', { id, typeChanged, dataChanged, propertiesChanged });
+        log('existing node', {
+          id,
+          typeChanged,
+          dataChanged,
+          propertiesChanged,
+        });
         if (typeChanged || dataChanged || propertiesChanged) {
           log('updating node', { id, type, data, properties });
-          const newNode = Option.some({ ...node, type, data, properties: { ...node.properties, ...properties } });
+          const newNode = Option.some({
+            ...node,
+            type,
+            data,
+            properties: { ...node.properties, ...properties },
+          });
           this._registry.set(nodeRx, newNode);
           this.onNodeChanged.emit({ id, node: newNode });
         }
@@ -432,7 +455,7 @@ export class Graph implements WritableGraph {
     });
 
     if (nodes) {
-      // Rx.batch(() => {
+      // Atom.batch(() => {
       this.addNodes(nodes);
       const _edges = nodes.map((node) => ({ source: id, target: node.id }));
       this.addEdges(_edges);
@@ -445,14 +468,14 @@ export class Graph implements WritableGraph {
   }
 
   removeNodes(ids: string[], edges = false): void {
-    Rx.batch(() => {
+    Atom.batch(() => {
       ids.map((id) => this.removeNode(id, edges));
     });
   }
 
   removeNode(id: string, edges = false): void {
     const nodeRx = this._node(id);
-    // TODO(wittjosiah): Is there a way to mark these rx values for garbage collection?
+    // TODO(wittjosiah): Is there a way to mark these atom values for garbage collection?
     this._registry.set(nodeRx, Option.none());
     this.onNodeChanged.emit({ id, node: Option.none() });
     // TODO(wittjosiah): Reset expanded and initialized flags?
@@ -470,7 +493,7 @@ export class Graph implements WritableGraph {
   }
 
   addEdges(edges: Edge[]): void {
-    Rx.batch(() => {
+    Atom.batch(() => {
       edges.map((edge) => this.addEdge(edge));
     });
   }
@@ -479,20 +502,32 @@ export class Graph implements WritableGraph {
     const sourceRx = this._edges(edgeArg.source);
     const source = this._registry.get(sourceRx);
     if (!source.outbound.includes(edgeArg.target)) {
-      log('add outbound edge', { source: edgeArg.source, target: edgeArg.target });
-      this._registry.set(sourceRx, { inbound: source.inbound, outbound: [...source.outbound, edgeArg.target] });
+      log('add outbound edge', {
+        source: edgeArg.source,
+        target: edgeArg.target,
+      });
+      this._registry.set(sourceRx, {
+        inbound: source.inbound,
+        outbound: [...source.outbound, edgeArg.target],
+      });
     }
 
     const targetRx = this._edges(edgeArg.target);
     const target = this._registry.get(targetRx);
     if (!target.inbound.includes(edgeArg.source)) {
-      log('add inbound edge', { source: edgeArg.source, target: edgeArg.target });
-      this._registry.set(targetRx, { inbound: [...target.inbound, edgeArg.source], outbound: target.outbound });
+      log('add inbound edge', {
+        source: edgeArg.source,
+        target: edgeArg.target,
+      });
+      this._registry.set(targetRx, {
+        inbound: [...target.inbound, edgeArg.source],
+        outbound: target.outbound,
+      });
     }
   }
 
   removeEdges(edges: Edge[], removeOrphans = false): void {
-    Rx.batch(() => {
+    Atom.batch(() => {
       edges.map((edge) => this.removeEdge(edge, removeOrphans));
     });
   }
@@ -599,6 +634,11 @@ export class Graph implements WritableGraph {
 
   /** @internal */
   _constructNode(node: NodeArg<any>): Option.Option<Node> {
-    return Option.some({ [graphSymbol]: this, data: null, properties: {}, ...node });
+    return Option.some({
+      [graphSymbol]: this,
+      data: null,
+      properties: {},
+      ...node,
+    });
   }
 }

package/src/signals-integration.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Registry, Rx } from '@effect-rx/rx-react';
+import { Atom, Registry } from '@effect-atom/atom-react';
 import { signal } from '@preact/signals-core';
 import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
 
@@ -26,7 +26,7 @@ describe('signals integration', () => {
     const registry = Registry.make();
     const state = signal<number>(0);
     const value = rxFromSignal(() => state.value);
-    const inline = Rx.make((get) => {
+    const inline = Atom.make((get) => {
       // NOTE: This will create a new rx instance each time.
       // This test is verifying that this behaves the same as using a stable rx instance.
       // The parent will remain subscribed to one instance until the new one is created.
@@ -138,7 +138,7 @@ describe('signals integration', () => {
           createExtension({
             id: 'outbound-connector',
             connector: () =>
-              Rx.make((get) => {
+              Atom.make((get) => {
                 const inner = get(innerRx) as any;
                 return inner ? [{ id: inner.id, type: EXAMPLE_TYPE, data: inner.name }] : [];
               }),
@@ -184,7 +184,7 @@ describe('signals integration', () => {
           connector: () => {
             const query = db.query(Filter.type(Type.Expando));
 
-            return Rx.make((get) => {
+            return Atom.make((get) => {
               const objects = get(rxFromQuery(query));
               return objects.map((object) => ({ id: object.id, type: EXAMPLE_TYPE, data: object.name }));
             });

package/src/stories/EchoGraph.stories.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
+import { Atom, type Registry, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
@@ -60,7 +60,7 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
   const spaceBuilderExtension = createExtension({
     id: 'space',
     connector: (node) =>
-      Rx.make((get) =>
+      Atom.make((get) =>
         Function.pipe(
           get(node),
           Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
@@ -71,7 +71,9 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
               .map((space) => ({
                 id: space.id,
                 type: 'dxos.org/type/Space',
-                properties: { label: get(rxFromSignal(() => space.properties.name)) },
+                properties: {
+                  label: get(rxFromSignal(() => space.properties.name)),
+                },
                 data: space,
               }));
           }),
@@ -84,7 +86,7 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
     id: 'object',
     connector: (node) => {
       let query: QueryResult<Live<Expando>> | undefined;
-      return Rx.make((get) =>
+      return Atom.make((get) =>
         Function.pipe(
           get(node),
           Option.flatMap((node) => (isSpace(node.data) ? Option.some(node.data) : Option.none())),
@@ -159,7 +161,12 @@ const runAction = async (client: Client, action: Action) => {
     }
 
     case Action.ADD_OBJECT:
-      getRandomSpace(client)?.db.add(Obj.make(Type.Expando, { type: 'test', name: faker.commerce.productName() }));
+      getRandomSpace(client)?.db.add(
+        Obj.make(Type.Expando, {
+          type: 'test',
+          name: faker.commerce.productName(),
+        }),
+      );
       break;
 
     case Action.REMOVE_OBJECT: {
@@ -258,7 +265,7 @@ const meta = {
       },
     }),
   ],
-} satisfies Meta<typeof Registry>;
+} satisfies Meta;
 
 export default meta;
 
@@ -269,7 +276,7 @@ export const JsonView: Story = {
     const client = useClient();
     const registry = useContext(RegistryContext);
     const graph = useMemo(() => createGraph(client, registry), [client, registry]);
-    const data = useRxValue(graph.json());
+    const data = useAtomValue(graph.json());
 
     return (
       <>
@@ -289,7 +296,7 @@ export const TreeView: Story = {
 
     const useItems = useCallback(
       (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
-        const connections = useRxValue(graph.connections(node?.id ?? ROOT_ID));
+        const connections = useAtomValue(graph.connections(node?.id ?? ROOT_ID));
         return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
       },
       [graph],

package/src/stories/Tree.tsx

@@ -72,7 +72,7 @@ const Scalar: FC<{ value: any }> = ({ value }) => {
 
 const Box: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => {
   return (
-    <div className={mx('flex px-2 border border-l-0 font-mono truncate', className)} {...props}>
+    <div className={mx('flex pli-2 border border-l-0 font-mono truncate', className)} {...props}>
       {children}
     </div>
   );

package/src/testing.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 
 import { type AnyEchoObject } from '@dxos/echo/internal';
 import { type QueryResult } from '@dxos/echo-db';
 
-export const rxFromQuery = <T extends AnyEchoObject>(query: QueryResult<T>): Rx.Rx<T[]> => {
-  return Rx.make((get) => {
+export const rxFromQuery = <T extends AnyEchoObject>(query: QueryResult<T>): Atom.Atom<T[]> => {
+  return Atom.make((get) => {
     const unsubscribe = query.subscribe((result) => {
       get.setSelf(result.objects);
     });