@dxos/app-graph 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-graph",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "description": "Constructs knowledge graphs for the purpose of building applications on top of",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -24,46 +25,44 @@
     "src"
   ],
   "dependencies": {
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/async": "0.8.4-main.84f28bd",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/echo": "0.8.4-main.84f28bd",
-    "@dxos/echo-signals": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/async": "0.8.4-main.a4bbb77",
+    "@dxos/debug": "0.8.4-main.a4bbb77",
+    "@dxos/echo": "0.8.4-main.a4bbb77",
+    "@dxos/echo-signals": "0.8.4-main.a4bbb77",
+    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
+    "@dxos/live-object": "0.8.4-main.a4bbb77",
+    "@dxos/invariant": "0.8.4-main.a4bbb77",
+    "@dxos/log": "0.8.4-main.a4bbb77",
+    "@dxos/util": "0.8.4-main.a4bbb77"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.88.0",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-db": "0.8.4-main.84f28bd",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-client": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-list": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-tabs": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.0",
+    "@types/react-dom": "~19.2.0",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-db": "0.8.4-main.a4bbb77",
+    "@dxos/random": "0.8.4-main.a4bbb77",
+    "@dxos/react-client": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-list": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-tabs": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
+    "@dxos/storybook-utils": "0.8.4-main.a4bbb77"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
     "effect": "3.14.21",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
   },
   "publishConfig": {
     "access": "public"

package/src/graph-builder.test.ts

@@ -6,10 +6,10 @@ import { Registry, Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 import { describe, expect, onTestFinished, test } from 'vitest';
 
-import { sleep, Trigger } from '@dxos/async';
+import { Trigger, sleep } from '@dxos/async';
 
 import { ROOT_ID } from './graph';
-import { createExtension, GraphBuilder } from './graph-builder';
+import { GraphBuilder, createExtension } from './graph-builder';
 import { type Node } from './node';
 
 const exampleId = (id: number) => `dx:test:${id}`;
@@ -17,6 +17,63 @@ const EXAMPLE_ID = exampleId(1);
 const EXAMPLE_TYPE = 'dxos.org/type/example';
 
 describe('GraphBuilder', () => {
+  describe('resolver', () => {
+    test('works', async () => {
+      const registry = Registry.make();
+      const builder = new GraphBuilder({ registry });
+      const graph = builder.graph;
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node).to.be.null;
+      }
+
+      builder.addExtension(
+        createExtension({
+          id: 'resolver',
+          resolver: () => {
+            console.log('resolver');
+            return Rx.make({ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: 1 });
+          },
+        }),
+      );
+      await graph.initialize(EXAMPLE_ID);
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.id).to.equal(EXAMPLE_ID);
+        expect(node?.type).to.equal(EXAMPLE_TYPE);
+        expect(node?.data).to.equal(1);
+      }
+    });
+
+    test('updates', async () => {
+      const registry = Registry.make();
+      const builder = new GraphBuilder({ registry });
+      const name = Rx.make('default');
+      builder.addExtension(
+        createExtension({
+          id: 'resolver',
+          resolver: () => Rx.make((get) => ({ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: get(name) })),
+        }),
+      );
+      const graph = builder.graph;
+      await graph.initialize(EXAMPLE_ID);
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.data).to.equal('default');
+      }
+
+      registry.set(name, 'updated');
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.data).to.equal('updated');
+      }
+    });
+  });
+
   describe('connector', () => {
     test('works', () => {
       const registry = Registry.make();

package/src/graph-builder.ts

@@ -4,14 +4,19 @@
 
 import { Registry, Rx } from '@effect-rx/rx-react';
 import { effect } from '@preact/signals-core';
-import { Array, type Option, pipe, Record } from 'effect';
+import { Array, Option, Record, pipe } from 'effect';
 
-import { type MulticastObservable, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, type MulticastObservable, type Trigger } from '@dxos/async';
 import { log } from '@dxos/log';
-import { byPosition, getDebugName, isNode, isNonNullable, type MaybePromise, type Position } from '@dxos/util';
+import { type MaybePromise, type Position, byPosition, getDebugName, isNode, isNonNullable } from '@dxos/util';
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, Graph, ROOT_ID, type GraphParams, type ExpandableGraph } from './graph';
-import { actionGroupSymbol, type ActionData, type Node, type NodeArg, type Relation } from './node';
+import { ACTION_GROUP_TYPE, ACTION_TYPE, type ExpandableGraph, Graph, type GraphParams, ROOT_ID } from './graph';
+import { type ActionData, type Node, type NodeArg, type Relation, actionGroupSymbol } from './node';
+
+/**
+ * Graph builder extension for adding nodes to the graph based on a node id.
+ */
+export type ResolverExtension = (id: string) => Rx.Rx<NodeArg<any> | null>;
 
 /**
  * Graph builder extension for adding nodes to the graph based on a connection to an existing node.
@@ -49,8 +54,7 @@ export type CreateExtensionOptions = {
   id: string;
   relation?: Relation;
   position?: Position;
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // resolver?: ResolverExtension;
+  resolver?: ResolverExtension;
   connector?: ConnectorExtension;
   actions?: ActionsExtension;
   actionGroups?: ActionGroupsExtension;
@@ -64,12 +68,16 @@ export const createExtension = (extension: CreateExtensionOptions): BuilderExten
     id,
     position = 'static',
     relation = 'outbound',
+    resolver: _resolver,
     connector: _connector,
     actions: _actions,
     actionGroups: _actionGroups,
   } = extension;
   const getId = (key: string) => `${id}/${key}`;
 
+  const resolver =
+    _resolver && Rx.family((id: string) => _resolver(id).pipe(Rx.withLabel(`graph-builder:_resolver:${id}`)));
+
   const connector =
     _connector &&
     Rx.family((node: Rx.Rx<Option.Option<Node>>) =>
@@ -87,7 +95,7 @@ export const createExtension = (extension: CreateExtensionOptions): BuilderExten
     Rx.family((node: Rx.Rx<Option.Option<Node>>) => _actions(node).pipe(Rx.withLabel(`graph-builder:_actions:${id}`)));
 
   return [
-    // resolver ? { id: getId('resolver'), position, resolver } : undefined,
+    resolver ? { id: getId('resolver'), position, resolver } : undefined,
     connector
       ? ({
           id: getId('connector'),
@@ -157,7 +165,7 @@ export type BuilderExtension = Readonly<{
   id: string;
   position: Position;
   relation?: Relation; // Only for connector.
-  // resolver?: ResolverExtension;
+  resolver?: ResolverExtension;
   connector?: (node: Rx.Rx<Option.Option<Node>>) => Rx.Rx<NodeArg<any>[]>;
 }>;
 
@@ -179,12 +187,12 @@ export const flattenExtensions = (extension: BuilderExtensions, acc: BuilderExte
 //   Should track LRU nodes that are not in the set/radius and remove them beyond a certain threshold.
 export class GraphBuilder {
   // TODO(wittjosiah): Use Context.
-  private readonly _connectorSubscriptions = new Map<string, CleanupFn>();
+  private readonly _subscriptions = new Map<string, CleanupFn>();
   private readonly _extensions = Rx.make(Record.empty<string, BuilderExtension>()).pipe(
     Rx.keepAlive,
     Rx.withLabel('graph-builder:extensions'),
   );
-
+  private readonly _initialized: Record<string, Trigger> = {};
   private readonly _registry: Registry.Registry;
   private readonly _graph: Graph;
 
@@ -194,7 +202,7 @@ export class GraphBuilder {
       ...params,
       registry: this._registry,
       onExpand: (id, relation) => this._onExpand(id, relation),
-      // onInitialize: (id) => this._onInitialize(id),
+      onInitialize: (id) => this._onInitialize(id),
       onRemoveNode: (id) => this._onRemoveNode(id),
     });
   }
@@ -275,10 +283,25 @@ export class GraphBuilder {
   }
 
   destroy(): void {
-    this._connectorSubscriptions.forEach((unsubscribe) => unsubscribe());
-    this._connectorSubscriptions.clear();
+    this._subscriptions.forEach((unsubscribe) => unsubscribe());
+    this._subscriptions.clear();
   }
 
+  private readonly _resolvers = Rx.family<string, Rx.Rx<Option.Option<NodeArg<any>>>>((id) => {
+    return Rx.make((get) => {
+      return pipe(
+        get(this._extensions),
+        Record.values,
+        Array.sortBy(byPosition),
+        Array.map(({ resolver }) => resolver),
+        Array.filter(isNonNullable),
+        Array.map((resolver) => get(resolver(id))),
+        Array.filter(isNonNullable),
+        Array.head,
+      );
+    });
+  });
+
   private readonly _connectors = Rx.family<string, Rx.Rx<NodeArg<any>[]>>((key) => {
     return Rx.make((get) => {
       const [id, relation] = key.split('+');
@@ -341,17 +364,38 @@ export class GraphBuilder {
       { immediate: true },
     );
 
-    this._connectorSubscriptions.set(id, cancel);
+    this._subscriptions.set(id, cancel);
   }
 
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // private async _onInitialize(id: string) {
-  //   log('onInitialize', { id });
-  // }
+  // TODO(wittjosiah): If the same node is added by a connector, the resolver should probably cancel itself?
+  private async _onInitialize(id: string) {
+    log('onInitialize', { id });
+    const resolver = this._resolvers(id);
+
+    const cancel = this._registry.subscribe(
+      resolver,
+      (node) => {
+        const trigger = this._initialized[id];
+        Option.match(node, {
+          onSome: (node) => {
+            this._graph.addNodes([node]);
+            trigger?.wake();
+          },
+          onNone: () => {
+            trigger?.wake();
+            this._graph.removeNodes([id]);
+          },
+        });
+      },
+      { immediate: true },
+    );
+
+    this._subscriptions.set(id, cancel);
+  }
 
   private _onRemoveNode(id: string): void {
-    this._connectorSubscriptions.get(id)?.();
-    this._connectorSubscriptions.delete(id);
+    this._subscriptions.get(id)?.();
+    this._subscriptions.delete(id);
   }
 }
 

package/src/graph.test.ts

@@ -6,7 +6,7 @@ import { Registry, Rx } from '@effect-rx/rx-react';
 import { Option } from 'effect';
 import { assert, describe, expect, onTestFinished, test } from 'vitest';
 
-import { getGraph, Graph, ROOT_ID, ROOT_TYPE } from './graph';
+import { Graph, ROOT_ID, ROOT_TYPE, getGraph } from './graph';
 import { type Node } from './node';
 
 const exampleId = (id: number) => `dx:test:${id}`;

package/src/graph.ts

@@ -3,15 +3,15 @@
 //
 
 import { Registry, Rx } from '@effect-rx/rx-react';
-import { Option, pipe, Record } from 'effect';
+import { Option, Record, pipe } from 'effect';
 
 import { Event, Trigger } from '@dxos/async';
 import { todo } from '@dxos/debug';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { isNonNullable, type MakeOptional } from '@dxos/util';
+import { type MakeOptional, isNonNullable } from '@dxos/util';
 
-import { type NodeArg, type Node, type Relation, type Action, type ActionGroup } from './node';
+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] };
@@ -59,8 +59,7 @@ export type GraphParams = {
   nodes?: MakeOptional<Node, 'data' | 'cacheable'>[];
   edges?: Record<string, Edges>;
   onExpand?: Graph['_onExpand'];
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // onInitialize?: Graph['_onInitialize'];
+  onInitialize?: Graph['_onInitialize'];
   onRemoveNode?: Graph['_onRemoveNode'];
 };
 
@@ -166,7 +165,7 @@ export interface ExpandableGraph extends ReadableGraph {
    *
    * Fires the `onInitialize` callback to provide initial data for a node.
    */
-  // initialize(id: string): Promise<void>;
+  initialize(id: string): Promise<void>;
 
   /**
    * Expand a node in the graph.
@@ -230,7 +229,7 @@ export class Graph implements WritableGraph {
   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>;
+  private readonly _onInitialize?: (id: string) => Promise<void>;
   private readonly _onRemoveNode?: (id: string) => void;
 
   private readonly _registry: Registry.Registry;
@@ -309,8 +308,9 @@ export class Graph implements WritableGraph {
     }).pipe(Rx.withLabel(`graph:json:${id}`));
   });
 
-  constructor({ registry, nodes, edges, onExpand, onRemoveNode }: GraphParams = {}) {
+  constructor({ registry, nodes, edges, onInitialize, onExpand, onRemoveNode }: GraphParams = {}) {
     this._registry = registry ?? Registry.make();
+    this._onInitialize = onInitialize;
     this._onExpand = onExpand;
     this._onRemoveNode = onRemoveNode;
 
@@ -379,15 +379,14 @@ export class Graph implements WritableGraph {
     return this._registry.get(this.edges(id));
   }
 
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // async initialize(id: string) {
-  //   const initialized = Record.get(this._initialized, id).pipe(Option.getOrElse(() => false));
-  //   log('initialize', { id, initialized });
-  //   if (!initialized) {
-  //     await this._onInitialize?.(id);
-  //     Record.set(this._initialized, id, true);
-  //   }
-  // }
+  async initialize(id: string) {
+    const initialized = Record.get(this._initialized, id).pipe(Option.getOrElse(() => false));
+    log('initialize', { id, initialized });
+    if (!initialized) {
+      await this._onInitialize?.(id);
+      Record.set(this._initialized, id, true);
+    }
+  }
 
   expand(id: string, relation: Relation = 'outbound'): void {
     const key = `${id}$${relation}`;

package/src/node.ts

@@ -2,7 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type MaybePromise, type MakeOptional } from '@dxos/util';
+import { type MakeOptional, type MaybePromise } from '@dxos/util';
+
+import { ACTION_GROUP_TYPE, ACTION_TYPE } from './graph';
 
 /**
  * Represents a node in the graph.
@@ -84,7 +86,7 @@ export type Action<TProperties extends Record<string, any> = Record<string, any>
 >;
 
 export const isAction = (data: unknown): data is Action =>
-  isGraphNode(data) ? typeof data.data === 'function' : false;
+  isGraphNode(data) ? typeof data.data === 'function' && data.type === ACTION_TYPE : false;
 
 export const actionGroupSymbol = Symbol('ActionGroup');
 
@@ -95,7 +97,7 @@ export type ActionGroup<TProperties extends Record<string, any> = Record<string,
 >;
 
 export const isActionGroup = (data: unknown): data is ActionGroup =>
-  isGraphNode(data) ? data.data === actionGroupSymbol : false;
+  isGraphNode(data) ? data.data === actionGroupSymbol && data.type === ACTION_GROUP_TYPE : false;
 
 export type ActionLike = Action | ActionGroup;
 

package/src/signals-integration.test.ts

@@ -14,7 +14,7 @@ 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 { GraphBuilder, createExtension, rxFromSignal } from './graph-builder';
 import { rxFromQuery } from './testing';
 
 registerSignalsRuntime();

package/src/stories/EchoGraph.stories.tsx

@@ -2,41 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
-import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Option, pipe } from 'effect';
 import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import {
-  live,
-  isSpace,
+  Expando,
+  Filter,
+  type Live,
   Query,
   type QueryResult,
   type Space,
   SpaceState,
-  Expando,
-  type Live,
-  Filter,
+  isSpace,
+  live,
 } from '@dxos/client/echo';
 import { Obj, Type } from '@dxos/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 { Icon, IconButton, Input, Select } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Path, Tree } from '@dxos/react-ui-list';
 import { getSize, mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
 import { byPosition, isNonNullable, safeParseInt } from '@dxos/util';
 
-import { JsonTree } from './Tree';
 import { type ExpandableGraph, ROOT_ID } from '../graph';
 import { GraphBuilder, createExtension, rxFromObservable, rxFromSignal } from '../graph-builder';
 import { type Node } from '../node';
 import { rxFromQuery } from '../testing';
 
+import { JsonTree } from './Tree';
+
 const DEFAULT_PERIOD = 500;
 
 enum Action {
@@ -205,7 +203,11 @@ const Controls = ({ children }: PropsWithChildren) => {
   return (
     <>
       <div className='flex shrink-0 p-2 space-x-2'>
-        <Button onClick={() => setGenerating((generating) => !generating)}>{generating ? <Pause /> : <Play />}</Button>
+        <IconButton
+          icon={generating ? 'ph--pause--regular' : 'ph--play--regular'}
+          label={generating ? 'Pause' : 'Play'}
+          onClick={() => setGenerating((generating) => !generating)}
+        />
         <div className='relative' title='mutation period'>
           <Input.Root>
             <Input.TextInput
@@ -217,11 +219,9 @@ const Controls = ({ children }: PropsWithChildren) => {
               onChange={({ target: { value } }) => setActionInterval(value)}
             />
           </Input.Root>
-          <Timer className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
+          <Icon icon='ph--timer--regular' classNames={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
         </div>
-        <Button onClick={() => action && runAction(client, action)}>
-          <Plus />
-        </Button>
+        <IconButton icon='ph--plus--regular' label='Add' onClick={() => action && runAction(client, action)} />
         <Select.Root value={action?.toString()} onValueChange={(action) => setAction(action as unknown as Action)}>
           <Select.TriggerButton placeholder='Select value' />
           <Select.Portal>
@@ -245,23 +245,25 @@ const Controls = ({ children }: PropsWithChildren) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'sdk/app-graph/EchoGraph',
   decorators: [
+    withTheme,
     withClientProvider({
       createIdentity: true,
-      onIdentityCreated: async ({ client }) => {
+      onCreateIdentity: async ({ client }) => {
         await client.spaces.create();
         await client.spaces.create();
       },
     }),
-    withTheme,
   ],
-};
+} satisfies Meta<typeof Registry>;
 
 export default meta;
 
-export const JsonView = {
+type Story = StoryObj<typeof meta>;
+
+export const JsonView: Story = {
   render: () => {
     const client = useClient();
     const registry = useContext(RegistryContext);
@@ -277,7 +279,7 @@ export const JsonView = {
   },
 };
 
-export const TreeView = {
+export const TreeView: Story = {
   render: () => {
     const client = useClient();
     const registry = useContext(RegistryContext);