@dxos/app-graph 0.8.2-staging.7ac8446 → 0.8.2

package/src/node.ts

@@ -41,10 +41,10 @@ export type Node<TData = any, TProperties extends Record<string, any> = Record<s
   data: TData;
 }>;
 
-export type NodeFilter<T = any, U extends Record<string, any> = Record<string, any>> = (
+export type NodeFilter<TData = any, TProperties extends Record<string, any> = Record<string, any>> = (
   node: Node<unknown, Record<string, any>>,
   connectedNode: Node,
-) => node is Node<T, U>;
+) => node is Node<TData, TProperties>;
 
 export type Relation = 'outbound' | 'inbound';
 
@@ -70,12 +70,12 @@ export type NodeArg<TData, TProperties extends Record<string, any> = Record<stri
 
 export type InvokeParams = {
   /** Node the invoked action is connected to. */
-  node: Node;
+  parent?: Node;
 
   caller?: string;
 };
 
-export type ActionData = (params: InvokeParams) => MaybePromise<void>;
+export type ActionData = (params?: InvokeParams) => MaybePromise<void>;
 
 export type Action<TProperties extends Record<string, any> = Record<string, any>> = Readonly<
   Omit<Node<ActionData, TProperties>, 'properties'> & {

package/src/signals-integration.test.ts

@@ -0,0 +1,218 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Registry, Rx } from '@effect-rx/rx-react';
+import { signal } from '@preact/signals-core';
+import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { Filter } from '@dxos/echo-db';
+import { EchoTestBuilder } from '@dxos/echo-db/testing';
+import { Expando, Ref } from '@dxos/echo-schema';
+import { registerSignalsRuntime } from '@dxos/echo-signals';
+import { live } from '@dxos/live-object';
+
+import { ROOT_ID } from './graph';
+import { createExtension, GraphBuilder, rxFromSignal } from './graph-builder';
+import { rxFromQuery } from './testing';
+
+registerSignalsRuntime();
+
+const EXAMPLE_TYPE = 'dxos.org/type/example';
+
+describe('signals integration', () => {
+  test('creating rx from signal', () => {
+    const registry = Registry.make();
+    const state = signal<number>(0);
+    const value = rxFromSignal(() => state.value);
+    const inline = Rx.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.
+      // The old one will then be garbage collected because it is no longer referenced.
+      const rx = rxFromSignal(() => get(value));
+      return get(rx);
+    });
+
+    let count = 0;
+    const cancel = registry.subscribe(value, (value) => {
+      count = value;
+    });
+    onTestFinished(() => cancel());
+
+    let inlineCount = 0;
+    const inlineCancel = registry.subscribe(inline, (value) => {
+      inlineCount = value;
+    });
+    onTestFinished(() => inlineCancel());
+
+    registry.get(value);
+    registry.get(inline);
+    expect(count).to.eq(0);
+    expect(inlineCount).to.eq(0);
+
+    state.value = 1;
+    expect(count).to.eq(1);
+    expect(inlineCount).to.eq(1);
+
+    state.value = 2;
+    expect(count).to.eq(2);
+    expect(inlineCount).to.eq(2);
+  });
+
+  describe('echo', () => {
+    let dbBuilder: EchoTestBuilder;
+
+    beforeEach(async () => {
+      dbBuilder = await new EchoTestBuilder().open();
+    });
+
+    afterEach(async () => {
+      await dbBuilder.close();
+    });
+
+    test('rx references are loaded lazily and receive signal notifications', async () => {
+      const registry = Registry.make();
+      await using peer = await dbBuilder.createPeer();
+
+      let outerId: string;
+      {
+        await using db = await peer.createDatabase();
+        const inner = db.add({ name: 'inner' });
+        const outer = db.add({ inner: Ref.make(inner) });
+        outerId = outer.id;
+        await db.flush();
+      }
+
+      await peer.reload();
+      {
+        await using db = await peer.openLastDatabase();
+        const outer = (await db.query(Filter.ids(outerId)).first()) as any;
+        const innerRx = rxFromSignal(() => outer.inner.target);
+
+        const loaded = new Trigger();
+        let count = 0;
+        const cancel = registry.subscribe(innerRx, (inner) => {
+          count++;
+          if (inner) {
+            loaded.wake();
+          }
+        });
+        onTestFinished(() => cancel());
+
+        expect(registry.get(innerRx)).to.eq(undefined);
+        expect(count).to.eq(1);
+
+        await loaded.wait();
+        expect(registry.get(innerRx)).to.include({ name: 'inner' });
+        expect(count).to.eq(2);
+      }
+    });
+
+    test('references graph builder', async () => {
+      const registry = Registry.make();
+      await using peer = await dbBuilder.createPeer();
+
+      let outerId, innerId: string;
+      {
+        await using db = await peer.createDatabase();
+        const inner = db.add({ name: 'inner' });
+        const outer = db.add({ inner: Ref.make(inner) });
+        innerId = inner.id;
+        outerId = outer.id;
+        await db.flush();
+      }
+
+      await peer.reload();
+
+      {
+        await using db = await peer.openLastDatabase();
+        const outer = (await db.query(Filter.ids(outerId)).first()) as any;
+        const innerRx = rxFromSignal(() => outer.inner.target);
+        const inner = registry.get(innerRx);
+        expect(inner).to.eq(undefined);
+
+        const builder = new GraphBuilder({ registry });
+        builder.addExtension(
+          createExtension({
+            id: 'outbound-connector',
+            connector: () =>
+              Rx.make((get) => {
+                const inner = get(innerRx) as any;
+                return inner ? [{ id: inner.id, type: EXAMPLE_TYPE, data: inner.name }] : [];
+              }),
+          }),
+        );
+
+        const graph = builder.graph;
+
+        const loaded = new Trigger();
+        let count = 0;
+        const cancel = registry.subscribe(graph.connections(ROOT_ID), (nodes) => {
+          count++;
+          if (nodes.length > 0) {
+            loaded.wake();
+          }
+        });
+        onTestFinished(() => cancel());
+        registry.get(graph.connections(ROOT_ID));
+        expect(count).to.eq(1);
+
+        graph.expand(ROOT_ID);
+        await loaded.wait();
+        expect(count).to.eq(2);
+
+        const nodes = registry.get(graph.connections(ROOT_ID));
+        expect(nodes).has.length(1);
+        expect(nodes[0].id).to.eq(innerId);
+        expect(nodes[0].data).to.eq('inner');
+      }
+    });
+
+    test('query graph builder', async () => {
+      const registry = Registry.make();
+      await using peer = await dbBuilder.createPeer();
+      await using db = await peer.createDatabase();
+      db.add(live(Expando, { name: 'a' }));
+      db.add(live(Expando, { name: 'b' }));
+
+      const builder = new GraphBuilder({ registry });
+      builder.addExtension(
+        createExtension({
+          id: 'expando',
+          connector: () => {
+            const query = db.query(Filter.type(Expando));
+
+            return Rx.make((get) => {
+              const objects = get(rxFromQuery(query));
+              return objects.map((object) => ({ id: object.id, type: EXAMPLE_TYPE, data: object.name }));
+            });
+          },
+        }),
+      );
+
+      const graph = builder.graph;
+      let count = 0;
+      const cancel = registry.subscribe(graph.connections(ROOT_ID), (nodes) => {
+        count = nodes.length;
+      });
+      onTestFinished(() => cancel());
+
+      registry.get(graph.connections(ROOT_ID));
+      expect(count).to.eq(0);
+
+      graph.expand(ROOT_ID);
+      expect(count).to.eq(2);
+
+      const object = db.add(live(Expando, { name: 'c' }));
+      await db.flush();
+      expect(count).to.eq(3);
+
+      // NOTE: This graph builder is not reactive to the object update.
+      object.name = 'updated';
+      await db.flush();
+      expect(count).to.eq(3);
+    });
+  });
+});

package/src/stories/EchoGraph.stories.tsx

@@ -4,37 +4,37 @@
 
 import '@dxos-theme';
 
+import { Rx, useRxValue } from '@effect-rx/rx-react';
 import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
-import React, { useEffect, useState } from 'react';
+import { Option, pipe } from 'effect';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
-  create,
+  live,
   isSpace,
-  type Echo,
-  type FilterSource,
-  type ReactiveEchoObject,
+  Query,
+  type QueryResult,
   type Space,
   SpaceState,
-  type QueryOptions,
-  type Query,
+  Expando,
+  type Live,
+  Filter,
 } from '@dxos/client/echo';
 import { faker } from '@dxos/random';
 import { type Client, useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Button, Input, Select, useAsyncEffect } from '@dxos/react-ui';
+import { Button, Input, Select } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 import { safeParseInt } from '@dxos/util';
 
 import { Tree } from './Tree';
-import { type Graph } from '../graph';
-import { GraphBuilder, cleanup, createExtension, memoize, toSignal } from '../graph-builder';
-import { type Node } from '../node';
+import { type ExpandableGraph, ROOT_ID } from '../graph';
+import { GraphBuilder, createExtension, rxFromObservable, rxFromSignal } from '../graph-builder';
+import { rxFromQuery } from '../testing';
 
 const DEFAULT_PERIOD = 500;
 
-const EMPTY_ARRAY: never[] = [];
-
 enum Action {
   CREATE_SPACE = 'CREATE_SPACE',
   CLOSE_SPACE = 'CLOSE_SPACE',
@@ -53,70 +53,61 @@ const actionWeights = {
   [Action.RENAME_OBJECT]: 4,
 };
 
-// TODO(wittjosiah): Factor out.
-const memoizeQuery = <T extends ReactiveEchoObject<any>>(
-  spaceOrEcho?: Space | Echo,
-  filter?: FilterSource<T>,
-  options?: QueryOptions,
-): T[] => {
-  const key = isSpace(spaceOrEcho) ? spaceOrEcho.id : undefined;
-  const query = memoize(
-    () =>
-      isSpace(spaceOrEcho)
-        ? spaceOrEcho.db.query(filter, options)
-        : (spaceOrEcho?.query(filter, options) as Query<T> | undefined),
-    key,
-  );
-  const unsubscribe = memoize(() => query?.subscribe(), key);
-  cleanup(() => unsubscribe?.());
-
-  return query?.objects ?? EMPTY_ARRAY;
-};
-
-const createGraph = async (client: Client): Promise<Graph> => {
+const createGraph = (client: Client): ExpandableGraph => {
   const spaceBuilderExtension = createExtension({
     id: 'space',
-    filter: (node): node is Node<null> => node.id === 'root',
-    connector: ({ node }) => {
-      const spaces = toSignal(
-        (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
-        () => client.spaces.get(),
-      );
-      if (!spaces) {
-        return;
-      }
-
-      return spaces
-        .filter((space) => space.state.get() === SpaceState.SPACE_READY)
-        .map((space) => ({
-          id: space.id,
-          type: 'dxos.org/type/Space',
-          properties: { label: space.properties.name },
-          data: space,
-        }));
-    },
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            const spaces = get(rxFromObservable(client.spaces)) ?? [];
+            return spaces
+              .filter((space) => get(rxFromObservable(space.state)) === SpaceState.SPACE_READY)
+              .map((space) => ({
+                id: space.id,
+                type: 'dxos.org/type/Space',
+                properties: { label: get(rxFromSignal(() => space.properties.name)) },
+                data: space,
+              }));
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
   });
 
   const objectBuilderExtension = createExtension({
     id: 'object',
-    filter: (node): node is Node<Space> => isSpace(node.data),
-    connector: ({ node }) => {
-      const objects = memoizeQuery(node.data, { type: 'test' });
-      return objects.map((object) => ({
-        id: object.id,
-        type: 'dxos.org/type/test',
-        properties: { label: object.name },
-        data: object,
-      }));
+    connector: (node) => {
+      let query: QueryResult<Live<Expando>> | undefined;
+      return Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (isSpace(node.data) ? Option.some(node.data) : Option.none())),
+          Option.map((space) => {
+            if (!query) {
+              query = space.db.query(Query.type(Expando, { type: 'test' }));
+            }
+            return get(rxFromQuery(query)).map((object) => ({
+              id: object.id,
+              type: 'dxos.org/type/test',
+              properties: { label: object.name },
+              data: object,
+            }));
+          }),
+          Option.getOrElse(() => []),
+        ),
+      );
     },
   });
 
   const graph = new GraphBuilder().addExtension(spaceBuilderExtension).addExtension(objectBuilderExtension).graph;
-  graph.subscribeTraverse({
-    visitor: (node) => {
-      void graph.expand(node);
-    },
+  graph.onNodeChanged.on(({ id }) => {
+    console.log('onNodeChanged', { id });
+    graph.expand(id);
   });
+  graph.expand(ROOT_ID);
 
   return graph;
 };
@@ -136,7 +127,9 @@ const getRandomSpace = (client: Client): Space | undefined => {
 
 const getSpaceWithObjects = async (client: Client): Promise<Space | undefined> => {
   const readySpaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.SPACE_READY);
-  const spaceQueries = await Promise.all(readySpaces.map((space) => space.db.query({ type: 'test' }).run()));
+  const spaceQueries = await Promise.all(
+    readySpaces.map((space) => space.db.query(Filter.type(Expando, { type: 'test' })).run()),
+  );
   const spaces = readySpaces.filter((space, index) => spaceQueries[index].objects.length > 0);
   return spaces[Math.floor(Math.random() * spaces.length)];
 };
@@ -160,13 +153,13 @@ const runAction = async (client: Client, action: Action) => {
     }
 
     case Action.ADD_OBJECT:
-      getRandomSpace(client)?.db.add(create({ type: 'test', name: faker.commerce.productName() }));
+      getRandomSpace(client)?.db.add(live({ type: 'test', name: faker.commerce.productName() }));
       break;
 
     case Action.REMOVE_OBJECT: {
       const space = await getSpaceWithObjects(client);
       if (space) {
-        const { objects } = await space.db.query({ type: 'test' }).run();
+        const { objects } = await space.db.query(Filter.type(Expando, { type: 'test' })).run();
         space.db.remove(objects[Math.floor(Math.random() * objects.length)]);
       }
       break;
@@ -175,7 +168,7 @@ const runAction = async (client: Client, action: Action) => {
     case Action.RENAME_OBJECT: {
       const space = await getSpaceWithObjects(client);
       if (space) {
-        const { objects } = await space.db.query({ type: 'test' }).run();
+        const { objects } = await space.db.query(Filter.type(Expando, { type: 'test' })).run();
         objects[Math.floor(Math.random() * objects.length)].name = faker.commerce.productName();
       }
       break;
@@ -189,10 +182,8 @@ const DefaultStory = () => {
   const [action, setAction] = useState<Action>();
 
   const client = useClient();
-  const [graph, setGraph] = useState<Graph>();
-  useAsyncEffect(async () => {
-    setGraph(await createGraph(client));
-  }, [client]);
+  const graph = useMemo(() => createGraph(client), [client]);
+  const data = useRxValue(graph.json());
 
   useEffect(() => {
     if (!generating) {
@@ -244,7 +235,7 @@ const DefaultStory = () => {
           </Select.Portal>
         </Select.Root>
       </div>
-      {graph && <Tree data={graph.toJSON()} />}
+      {data && <Tree data={data} />}
     </>
   );
 };
@@ -256,7 +247,7 @@ export default {
     withTheme,
     withClientProvider({
       createIdentity: true,
-      onInitialized: async (client: Client) => {
+      onIdentityCreated: async ({ client }) => {
         await client.spaces.create();
         await client.spaces.create();
       },

package/src/testing.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Rx } from '@effect-rx/rx-react';
+
+import { type QueryResult } from '@dxos/echo-db';
+import { type BaseObject } from '@dxos/echo-schema';
+
+export const rxFromQuery = <T extends BaseObject>(query: QueryResult<T>): Rx.Rx<T[]> => {
+  return Rx.make((get) => {
+    const unsubscribe = query.subscribe((result) => {
+      get.setSelf(result.objects);
+    });
+
+    get.addFinalizer(() => unsubscribe());
+
+    return query.objects;
+  });
+};