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

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<TData = any, TProperties extends Record<string, any> = Record<string, any>> = (
+export type NodeFilter<T = any, U extends Record<string, any> = Record<string, any>> = (
   node: Node<unknown, Record<string, any>>,
   connectedNode: Node,
-) => node is Node<TData, TProperties>;
+) => node is Node<T, U>;
 
 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. */
-  parent?: Node;
+  node: 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/stories/EchoGraph.stories.tsx

@@ -4,27 +4,37 @@
 
 import '@dxos-theme';
 
-import { Rx, useRxValue } from '@effect-rx/rx-react';
 import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
-import { Option, pipe } from 'effect';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { live, isSpace, Query, type QueryResult, type Space, SpaceState, Expando, type Live } from '@dxos/client/echo';
+import {
+  create,
+  isSpace,
+  type Echo,
+  type FilterSource,
+  type ReactiveEchoObject,
+  type Space,
+  SpaceState,
+  type QueryOptions,
+  type Query,
+} 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 } from '@dxos/react-ui';
+import { Button, Input, Select, useAsyncEffect } 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 ExpandableGraph, ROOT_ID } from '../graph';
-import { GraphBuilder, createExtension, rxFromObservable, rxFromSignal } from '../graph-builder';
-import { rxFromQuery } from '../testing';
+import { type Graph } from '../graph';
+import { GraphBuilder, cleanup, createExtension, memoize, toSignal } from '../graph-builder';
+import { type Node } from '../node';
 
 const DEFAULT_PERIOD = 500;
 
+const EMPTY_ARRAY: never[] = [];
+
 enum Action {
   CREATE_SPACE = 'CREATE_SPACE',
   CLOSE_SPACE = 'CLOSE_SPACE',
@@ -43,61 +53,70 @@ const actionWeights = {
   [Action.RENAME_OBJECT]: 4,
 };
 
-const createGraph = (client: Client): ExpandableGraph => {
+// 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 spaceBuilderExtension = createExtension({
     id: '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(() => []),
-        ),
-      ),
+    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,
+        }));
+    },
   });
 
   const objectBuilderExtension = createExtension({
     id: '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(() => []),
-        ),
-      );
+    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,
+      }));
     },
   });
 
   const graph = new GraphBuilder().addExtension(spaceBuilderExtension).addExtension(objectBuilderExtension).graph;
-  graph.onNodeChanged.on(({ id }) => {
-    console.log('onNodeChanged', { id });
-    graph.expand(id);
+  graph.subscribeTraverse({
+    visitor: (node) => {
+      void graph.expand(node);
+    },
   });
-  graph.expand(ROOT_ID);
 
   return graph;
 };
@@ -141,7 +160,7 @@ const runAction = async (client: Client, action: Action) => {
     }
 
     case Action.ADD_OBJECT:
-      getRandomSpace(client)?.db.add(live({ type: 'test', name: faker.commerce.productName() }));
+      getRandomSpace(client)?.db.add(create({ type: 'test', name: faker.commerce.productName() }));
       break;
 
     case Action.REMOVE_OBJECT: {
@@ -170,8 +189,10 @@ const DefaultStory = () => {
   const [action, setAction] = useState<Action>();
 
   const client = useClient();
-  const graph = useMemo(() => createGraph(client), [client]);
-  const data = useRxValue(graph.json());
+  const [graph, setGraph] = useState<Graph>();
+  useAsyncEffect(async () => {
+    setGraph(await createGraph(client));
+  }, [client]);
 
   useEffect(() => {
     if (!generating) {
@@ -223,7 +244,7 @@ const DefaultStory = () => {
           </Select.Portal>
         </Select.Root>
       </div>
-      {data && <Tree data={data} />}
+      {graph && <Tree data={graph.toJSON()} />}
     </>
   );
 };
@@ -235,7 +256,7 @@ export default {
     withTheme,
     withClientProvider({
       createIdentity: true,
-      onIdentityCreated: async ({ client }) => {
+      onInitialized: async (client: Client) => {
         await client.spaces.create();
         await client.spaces.create();
       },

package/dist/types/src/experimental/graph-projections.test.d.ts

@@ -1,25 +0,0 @@
-type Cb = () => void;
-interface Query {
-    id?: string[];
-    typename?: string[];
-}
-/**
- * Lazy query result that can be executed.
- * Does not run without the run function being called.
- */
-interface QueryResult<T> {
-    /**
-     * Execute the query and subscribe to the result.
-     * @param next Called at least once with the first value (maybe synchronously) and then for every subsequent update.
-     * @param error Called on error. `next` is never called after that.
-     * @returns Function to dispose the query and unsubscribe.
-     */
-    run(onData: (value?: T[]) => void, onError: (err: Error) => void): Cb;
-}
-declare const QueryResult: Readonly<{
-    fromPromise: <T>(run: (onDispose: (cb: Cb) => void) => Promise<T[]>) => QueryResult<T>;
-}>;
-interface _Resolver<T> {
-    query(query: Query): QueryResult<T>;
-}
-//# sourceMappingURL=graph-projections.test.d.ts.map

package/dist/types/src/experimental/graph-projections.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"graph-projections.test.d.ts","sourceRoot":"","sources":["../../../../src/experimental/graph-projections.test.ts"],"names":[],"mappings":"AAIA,KAAK,EAAE,GAAG,MAAM,IAAI,CAAC;AAErB,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,UAAU,WAAW,CAAC,CAAC;IACrB;;;;;OAKG;IACH,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,GAAG,EAAE,CAAC;CACvE;AAED,QAAA,MAAM,WAAW;kBACD,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,KAAG,WAAW,CAAC,CAAC,CAAC;EAyBpF,CAAC;AAEH,UAAU,SAAS,CAAC,CAAC;IACnB,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;CACrC"}

package/dist/types/src/signals-integration.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=signals-integration.test.d.ts.map

package/dist/types/src/signals-integration.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"signals-integration.test.d.ts","sourceRoot":"","sources":["../../../src/signals-integration.test.ts"],"names":[],"mappings":""}

package/dist/types/src/testing.d.ts

@@ -1,5 +0,0 @@
-import { Rx } from '@effect-rx/rx-react';
-import { type QueryResult } from '@dxos/echo-db';
-import { type BaseObject } from '@dxos/echo-schema';
-export declare const rxFromQuery: <T extends BaseObject>(query: QueryResult<T>) => Rx.Rx<T[]>;
-//# sourceMappingURL=testing.d.ts.map

package/dist/types/src/testing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,EAAE,OAAO,WAAW,CAAC,CAAC,CAAC,KAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAUlF,CAAC"}

package/src/experimental/graph-projections.test.ts

@@ -1,56 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-type Cb = () => void;
-
-interface Query {
-  id?: string[];
-  typename?: string[];
-}
-
-/**
- * Lazy query result that can be executed.
- * Does not run without the run function being called.
- */
-interface QueryResult<T> {
-  /**
-   * Execute the query and subscribe to the result.
-   * @param next Called at least once with the first value (maybe synchronously) and then for every subsequent update.
-   * @param error Called on error. `next` is never called after that.
-   * @returns Function to dispose the query and unsubscribe.
-   */
-  run(onData: (value?: T[]) => void, onError: (err: Error) => void): Cb;
-}
-
-const QueryResult = Object.freeze({
-  fromPromise: <T>(run: (onDispose: (cb: Cb) => void) => Promise<T[]>): QueryResult<T> => {
-    return {
-      run: (onData, onError) => {
-        const cbs: Cb[] = [];
-        let disposed = false;
-        const dispose = () => {
-          cbs.forEach((cb) => cb());
-          disposed = true;
-        };
-        run((cb) => (disposed ? cb() : cbs.push(cb))).then(
-          (data) => {
-            if (disposed) {
-              return;
-            }
-            onData(data);
-          },
-          (err) => {
-            dispose();
-            onError(err);
-          },
-        );
-        return dispose;
-      },
-    };
-  },
-});
-
-interface _Resolver<T> {
-  query(query: Query): QueryResult<T>;
-}

package/src/signals-integration.test.ts

@@ -1,218 +0,0 @@
-//
-// 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({ id: 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({ id: 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/testing.ts

@@ -1,20 +0,0 @@
-//
-// 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;
-  });
-};